Question

我想创建一个漂浮在图像周围的文本。接下来的段落应该只围绕下一个图像浮动。

<div>
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage1.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage1.png.
   </p>
</div>

<div style="clear: both;">
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage2.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage2.png.
   </p>
</div>

我希望避免在下一个 div上添加style="clear: both;"，但希望浮动图像在第一个顶级</div>的末尾自动停止浮动，所以每个div都可以有相同的样式类：

<div class="floatBlock">
   ...
</div>

<div class="floatBlock">
   ...
</div>

如果内部有-tags（第一个floatBlock的图像不应该浮动在h3下面），这尤其有用：

<div class="floatBlock">
   ...
</div>

<h3>Lorem ipsum</h3>

<div class="floatBlock">
   ...
</div>

我希望我的目标可以理解。

如何定义floatBlock的样式，以便嵌套图像不会浮动到外面？

Answer 1

您应该可以使用clear选择器添加after。您可以在CSS文件中添加它：

.floatBlock:after {
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

这当然是我猜的。没有你的CSS，我没有正确的方法来测试它。

Answer 2

没有理由不能将clear:both应用于所有元素。所以你可以在你的课堂上这样做：

.floatBlock{
    clear:both;
}

Here is a working example

如果您需要处理短测试和大图像，并且在floatBlock元素之间还有其他元素（根据注释），那么在每个元素之后放置一个清晰的元素是有意义的。像这样：

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

.clear {
    clear:both;
}

Here is a working example

停止使用标记的结尾

2 个答案: