html - 当文本的高度超过图像的高度时，如何防止文本低于图像？

Question

我使用以下内容在左侧显示图像，并在图像右侧显示任何相关信息。在某些情况下，描述、地址和其他信息超出图像的高度，文本会位于图像下方。我的问题是我应该如何保持文本不在图像下方，而是像列一样继续？

.eventphoto 
{
   padding:1px;
   width:200px; 
   float:left;
   margin-right:15px;
   border-radius:2px;
}
.desc 
{
   font-size:0.8em;
   line-height:13pt; 
}


<div class="desc">

<img class="eventphoto" src="">

<div style="float:left;">
<p>DESCRIPTION</p>
.
.
.
</div>
</div>

Answer 1

在图像上尝试 float:left 并在文本上尝试 float:right ，例如：

.eventphoto 
{
    padding:1px;
    width:200px; 
    float:left;
    margin-right:15px;
    border-radius:2px;
}
.desc 
{
    font-size:0.8em;
    line-height:13pt; 
    float:right;
}

Answer 2

我认为overflow: hidden;是你最好的选择。这是它的使用演示：

http://jsbin.com/owesiw/1/edit

Answer 3

这是一个相当标准的构造：媒体对象

在您的情况下，如果我们像这样添加 Nicole 的样式：

<style>
  .eventphoto 
  {
    padding:1px;
    width:200px; 
    margin-right:15px;
    border-radius:2px;
  }
  .desc 
  {
    font-size:0.8em;
    line-height:13pt; 
  }

  .media {margin:10px;}
  .media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
  .media .img {float:left; margin-right: 10px;}
  .media .img img{display:block;}
  .media .imgExt{float:right; margin-left: 10px;}
</style>

（将格式保留给您的原始类），并使用适当的样式在图像周围添加一个包装器：

<div class="desc media">

  <div class="img">
    <img class="eventphoto" src="http://placekitten.com/100/100">
  </div>

  <div class="bd">
    <p>DESCRIPTION</p>
    <p> ... </p>
  </div>
</div>

一切正常。有关示例，请参见此 CodePen：http: //codepen.io/paulroub/pen/JDsKa