使用CSS将浮动图像保留在div中
使用CSS将浮动图像保留在div中
提问于 2008-12-15 19:31:06
我遇到了这个问题，一如既往，但从来没有试图找到正确的解决方案
代码：
<div id="ListOfTextAndPhotos">
<div style="border-bottom: solid 1px silver;">
<img src="photo.jpg" style="float: left">
Some text about the photo
</div>
<div style="border-bottom: solid 1px silver;">
<img src="photo2.jpg" style="float: left">
Some text about the photo2
</div>
<div style="border-bottom: solid 1px silver;">
<img src="photo3.jpg" style="float: left">
Some text about the photo3
</div>
</div>问题:如何将照片保存在DIV中？在照片下面有分隔线
回答 5
Stack Overflow用户
回答已采纳
发布于 2008-12-15 19:43:05
更传统的方法(不是清除)是将包含div的overflow属性设置为隐藏。
<div style="border-bottom: solid 1px silver; overflow: hidden;">
<img src="photo3.jpg" style="float: left">
<div>Some text about the photo3</div>
</div>有时，IE6不支持该设置，您必须求助于cLFlaVA攻击。
Stack Overflow用户
发布于 2008-12-15 19:35:19
浮动元素会将其从文档流中删除，因此在屏幕上呈现时，它不会占用一般流中的空间。还有其他方法来处理这个问题，但这里有一个技巧：
<div id="ListOfTextAndPhotos">
<div style="border-bottom: solid 1px silver;">
<img src="photo.jpg" style="float: left">
<div style="clear:both;">Some text about the photo</div>
</div>
<div style="border-bottom: solid 1px silver;">
<img src="photo2.jpg" style="float: left">
<div style="clear:both;">Some text about the photo2</div>
</div>
<div style="border-bottom: solid 1px silver;">
<img src="photo3.jpg" style="float: left">
<div style="clear:both;">Some text about the photo3</div>
</div>
</div>Stack Overflow用户
发布于 2008-12-15 19:34:30
一个又快又脏的方法是同时浮动包含的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/369448
复制相关文章
相似问题