css - 如何避免文本使用 css 低于缩略图

Question

我有带缩略图的帖子列表。

我试图防止标题出现在图片下方。

我试过 white-space: normal 但它没有影响这里的文本。我还尝试了 float: left 和 Display:inline 都没有帮助将标题保留在图像旁边。

代码 CSS 和 HTML:

ul{
  list-style-type:none;
  padding:0;
  background-color:white;
}
li{
  border: 1px solid gray;
  width: 325px;
  border-bottom:1px solid @border-color;
  padding:10px;
  white-space: normal;
  
}
img{ 
  width:80px;
  height:80px;
}
.post-title{
  display: inline-block;
  margin-left:5px;
  vertical-align: middle;
}
.post-title a{
  white-space: normal;
  color:@breadcrumbs-current-color;
}
.post-title p{
  margin-bottom:0;
  color:gray;
  font-size:11px;  
}

<ul>
  <li>
    <a><img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png"/ ></a>
    <div class="post-title">
      <a>Street Dance Moves Comically Illustrated
      <p>200 view</p>
      </a>
    </div>
  </li>
  <li> 
    <a><img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png"/></a>
    <div class="post-title">
      <a>Hello World
      <p>80 view</p>
      </a>
    </div>
  </li>
  
</ul>

Answer 1

一个快速的解决方案是使用 max-width 并删除 vertical-align:

ul {
  list-style-type: none;
  padding: 0;
  background-color: white;
}
li {
  border: 1px solid gray;
  width: 325px;
  border-bottom: 1px solid@border-color;

padding: 10px;
  white-space: normal;
}
img {
  width: 80px;
  height: 80px;
}
.post-title {
  display: inline-block;
  margin-left: 5px;
  max-width: 200px;
}
.post-title a {
  white-space: normal;
  color: @breadcrumbs-current-color;

}
.post-title p {
  margin-bottom: 0;
  color: gray;
  font-size: 11px;
}

<ul>
  <li>
    <a>
      <img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
    </a>
    <div class="post-title">
      <a>Street Dance Moves Comically Illustrated
      <p>200 view</p>
      </a>
    </div>
  </li>
  <li>
    <a>
      <img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
    </a>
    <div class="post-title">
      <a>Hello World
      <p>80 view</p>
      </a>
    </div>
  </li>

</ul>

但我建议使用 display: table 技术:

ul {
  list-style-type: none;
  padding: 0;
  background-color: white;
}
li {
  display: table;
  border: 1px solid gray;
  width: 325px;
  border-bottom: 1px solid@border-color;

padding: 10px;
  white-space: normal;
}
img {
  width: 80px;
  height: 80px;
}
.post-title {
  display: table-cell;
  margin-left: 5px;
  max-width: 200px;
  vertical-align: middle;
}
.post-title a {
  white-space: normal;
  color: @breadcrumbs-current-color;

}
.post-title p {
  margin-bottom: 0;
  color: gray;
  font-size: 11px;
}
li > a {
  width: 90px;
  display: table-cell;
  vertical-align: middle;
}

<ul>
  <li>
    <a>
      <img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
    </a>
    <div class="post-title">
      <a>Street Dance Moves Comically Illustrated
      <p>200 view</p>
      </a>
    </div>
  </li>
  <li>
    <a>
      <img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
    </a>
    <div class="post-title">
      <a>Hello World
      <p>80 view</p>
      </a>
    </div>
  </li>
  <li>
    <a>
      <img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
    </a>
    <div class="post-title">
      <a>Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
      <p>80 view</p>
      </a>
    </div>
  </li>
</ul>