Question

我有一个定义的div，在执行中，它包含一个标题段落类和一个允许“body”文本浮动到所述图像的图像类。问题在于：如果“body”文本不够长，无法向下流过图像，则div的下一个实例在浮动图像时开始。我正在寻找一种方法来强制div类的每个新实例清除以前的浮动并自行启动，冲洗容器。

CSS：

.textChunk {
font-family: 'Special Elite', cursive;
font-size:20px;
display:block;
float:none;
}

.leftPic {
max-width:25%;
max-height:25%;
margin-right:10px;
float:left;
}

.rightPic {
max-width:25%;
max-height:25%;
margin-left:10px;
float:right;
}

HTML：

<div class="textChunk">
    <img class="leftPic" src="images/img1.png">
    <p>Lorem ipsum dolor.</p>
</div><br />
<div class="textChunk">
    <img class="leftPic" src="images/img2.png">
    <p>Lorem ipsum dolor.</p>
</div><br />
<div class="textChunk">
    <img class="leftPic" src="images/img3.png">
    <p>Lorem ipsum dolor.</p>
</div>

此外，是否有一种方法可以使正文文本在图片上方向上流动并继续向上按压图片边框的线条，即使在文本通过图像底部后也是如此，这样它就不会环绕在图像下？

Answer 1

使用clear:both以便每个新实例都重新开始。看到这个：http://jsfiddle.net/itz2k13/YGD6t/

.textChunk {
 font-family: 'Special Elite', cursive;
 font-size:20px;
 display:block;
 clear:both;
}

Answer 2

将width:100%;和/或clear:both;应用于.textChunk div。从两侧的浮子上清除两者都意味着清楚。如果你的.textChunk div是100％宽，那么无论如何都不会出现浮动问题。

强制div清除之前和之后的浮动

2 个答案: