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

尝试浮动：左边的图像和浮动：右边的文字像：

.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

这是一个相当标准的结构：media object

在你的情况下，如果我们添加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

当文本高度超过图像高度时，如何防止文本在图像下方？

3 个答案: