Question

我有一个带浮动图像的布局和一系列环绕它的h2和段落。我想要做的是防止在标题及其相关段落之间环绕图像底部。

而不是：

---------------
|             |  HEADER 1
|    IMAGE    |  Lorem ipsum dolor sit amet, 
|             |  consectetur adipiscing elit.
|             |  Lorem ipsum dolor sit amet,
|             |
---------------  HEADER 2
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Lorem ipsum dolor sit amet,

我想：

---------------
|             |  HEADER 1
|    IMAGE    |  Lorem ipsum dolor sit amet, 
|             |  consectetur adipiscing elit.
|             |  Lorem ipsum dolor sit amet,
|             |
---------------  
HEADER 2
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.

该网站是响应式的，因此发生包装的地方会有所不同（我不能只清除第二个标题。）

以下是宽度较大的样子：

---------------
|             |  HEADER 1
|    IMAGE    |  Lorem ipsum dolor sit amet, consectetur adipiscing
|             |  elit. Lorem ipsum dolor sit amet,
|             |  
|             |  HEADER 2
---------------  Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

以下是一些示例代码：

img {
  float: left;
}

<img src="http://placehold.it/150x150">
<h2>Some Heading</h2>
<p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>

<h2>Some Other heading</h2>
<p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>

JSFiddle

我已经尝试将标题/段落对设置为溢出的部分：隐藏，例如。

img {
  float: left;
}
section {
  overflow: hidden;
}

<img src="http://placehold.it/150x150">
<section>
  <h2>Some Heading</h2>
  <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>
</section>

<section>
  <h2>Some Other heading</h2>
  <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>
</section>

JSFiddle

但这并不是我正在寻找的。这样做可以保持整个段落不被包装，但是我希望当它在段落的中间点击时发生，而不是在标题和段落之间 - 例如。

---------------
|             |  HEADER 1
|    IMAGE    |  Lorem ipsum dolor sit amet, consectetur adipiscing
|             |  elit. Lorem ipsum dolor sit amet,
|             |  
|             |  HEADER 2
---------------  Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit. Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit.

Answer 1

尝试添加

  <div class="clear"></div>

在你的第二个标题之前。

使用

div.clear {
    clear: both;
}

但由于您没有提供任何代码，因此很难提供准确的答案。

一般情况下，请查看clear和clearfix。那些应该帮助你解决问题。使用float后你的风格。

实际上，W3schools提供了一个非常基本的例子，说明了你想要实现的目标。

Answer 2

我认为最简单的选择是包装标题，文本组合（在DIV或相关元素中有或没有图像。

.group {
  clear: left;
}
.group > img {
  float: left;
}
.group-text {
  overflow: hidden;
}

<article class="group">

  <img src="http://placehold.it/150x150">
  <div class="group-text">
    <h2>Some Heading</h2>
    <p>
      Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
    </p>  
  </div>

</article>

<article class="group">

  <h2>Some Other heading</h2>
  <p>
    Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
  </p>

</article>

演示JSFiddle

您也可以在不包装没有图像的每个标题和文本对的情况下执行此操作。我们清除了.group包装器的浮动。所以他们不会像你说明的那样在图像上＆＃34;挂起＆＃34; 。

对于包装内的标题（h2），我们需要撤消我们应用于所有标题的清除（h2），否则它们会清除图像的浮动并显示在其下方。

h2, .group {
  clear: left;
}
.group > img {
  float: left;
}
.group-text {
  overflow: hidden;
}
.group-text h2 {
  clear: none;
}

<article class="group">

  <img src="http://placehold.it/150x150">
  <div class="group-text">
    <h2>Some Heading</h2>
    <p>
      Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
    </p>  
  </div>

</article>

<h2>Some Other heading</h2>
<p>
  Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
</p>

演示JSFiddle

请注意.group-text { overflow: hidden; }会导致文本无法包装图像。如果您更喜欢包装，请删除该属性。

防止标题和段落之间的文本换行

2 个答案: