Question

.pic {
    float:left;
}

.pic > img {
    width:14em;
    height:14em;
}

.data {
    float:left;
    padding:0.5em 0.5em 0.5em 2em;
}

.description {
    margin-bottom:1em;
}


<div id="item1">

    <div class="pic"><img src="..." /></div>
    <div class="data">
        <div class="description"><p>...long description of the item...</p></div>
    </div>

</div>

如何阻止文本跳转到下一行？我希望它始终保持在图像之外，只需在窗口调整大小时进行换行。

http://jsfiddle.net/BmLHD/

Answer 1

你想要的实际上是互联网的基本构建模块之一：媒体对象，由Nicole Sullivan命名和推广。

<div class="media attribution">

  <a href="http://twitter.com/stubbornella" class="img">
      <img src="//placekitten.com/150/100" alt="me" />
  </a>

  <div class="bd">
    @Stubbornella 14 minutes ago
  </div>

</div>

/* ====== media ====== */
.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;}

您可以see it in action here阅读more about the media object here。

注意：您也可以使用更简单，更优雅的the Flexbox version，但您需要确保解决跨浏览器支持问题。

Answer 2

从数据中删除float并在描述中添加左边距。

.pic {
    float:left;
}

.pic > img {
    width:14em;
    height:14em;
}

.data {
    padding:0.5em 0.5em 0.5em 2em;
}

.description {
    margin-bottom:1em;
    margin-left: 14em;
}

小提琴：http://jsfiddle.net/BmLHD/7/

在图片旁边浮动文字，保持窗口大小调整的位置

2 个答案: