Question

我有一个非常标准的页面布局，其中有一个图像浮动到左边，然后是右边的一些信息，它由1个行标题（粗体）和每个标题下面的1行数据组成。

我希望数据在图像周围流动，但是有什么方法可以阻止数据在包装时与其中的标题分开？ I.E.只包含一行数据和下一个标题。

看似简单，但我无法想出办法！

编辑：这里有一个jsfiddle来说明我的情况（酷网站！）：http://www.jsfiddle.net/qYcX5/ 看到最后一段与其标题分开。

顺便说一下，在我正在构建的实际页面上，右侧段落的长度和项目的数量会有所不同，所以我不能随意决定在某一点清除数据并始终让它看起来正确

Answer 1

我知道这是一个老问题，但答案就在那里......

我认为最简单的方法是将标题/段落对包装在div或section元素中，然后将它们设置为overflow：hidden -

＆＃13;

div#parent-block {
  width: 600px
}

div#parent-block img {
  width: 350px;
  height: 200px;
  float: left;
  margin-right: 8px;
}

section {
  overflow: hidden;
}

h3 {
  font-weight:bold;
}

p {
  margin-bottom: 5px;
}

＆＃13;

<div id="parent-block">
  <img src="http://placehold.it/350x200">
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
  <section>
    <h3>A header</h3>
    <p>Some text that should stay with its header</p>
  </section>
</div>

＆＃13;

http://jsfiddle.net/mrbh/cyjvspLs/2/

Answer 2

您可以尝试使用此HTML - http://textsnip.com/1022ae并告诉我这是否是您要找的内容。

Answer 3

也许尝试整合javascript来衡量累积的<h3>代码的高度，然后如果它们累积大于图像的高度，clear: left最后一个...不确定

@Jessica：如果您想要右侧的所有文字，只需将以下内容添加到您的CSS中：

h3, p { padding-left: 360px; /* the width of the image + 10px for extra padding */ }

另外，请查看更新后的jsFiddle：http://www.jsfiddle.net/qYcX5/，了解其工作原理。

祝你好运！

Answer 4

我认为你需要在标题和后面的段落周围弹出一个包含div，然后浮动这个div容器。

<img />
<div>
  <h1>title</h1>
  <p>text</p>
</div>

Answer 5

也许这个？ http://jsfiddle.net/qYcX5/18/

包装 - 不要分解段落

5 个答案: