1

我有一个已定义的 div，它在执行时包含一个标题段落类和一个允许“正文”文本浮动到所述图像的图像类。问题是这样的：如果“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>

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

4

2 回答 2

0

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

.textChunk {
 font-family: 'Special Elite', cursive;
 font-size:20px;
 display:block;
 clear:both;
}
于 2013-06-08T17:34:57.387 回答
0

应用width:100%;和/或clear:both;到您的.textChunkdiv。Clear both 意味着从两侧的浮动中清除。如果你的.textChunkdiv 是 100% 宽，那么无论如何都不会出现浮动问题。

于 2013-06-08T17:36:08.160 回答