如何使用css避免文本在缩略图下面

Question

我有缩略图的帖子列表。

我试图阻止标题进入图像。

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

CODE CSS＆amp; HTML：

＆＃13;

＆＃13;

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;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但我建议采用display: table技术：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;