我遇到了这个问题,一如既往,但从来没有试图找到正确的解决方案
代码:
<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中?在照片下面有分隔线
发布于 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攻击。
发布于 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>
发布于 2008-12-15 19:34:30
一个又快又脏的方法是同时浮动包含的div。
https://stackoverflow.com/questions/369448
复制相似问题