Html 使用 CSS 将浮动图像保留在 div 内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/369448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keeping an floated image inside the div with CSS
提问by Eduardo Molteni
I'm having this problem, same as ever, but never try to find the rightsolution
我遇到了这个问题，和以前一样，但永远不要试图找到正确的解决方案
code:
代码：
<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>
Question: How do I to keep the photo inside the DIV?with the separator line under the photo
问题： 如何将照片保存在 DIV 中？与照片下方的分隔线
回答by davethegr8
The more traditional way (other than clearing) is to set the overflow property of the containing div to hidden.
更传统的方法（除了清除）是将包含 div 的溢出属性设置为隐藏。
<div style="border-bottom: solid 1px silver; overflow: hidden;">
<img src="photo3.jpg" style="float: left">
<div>Some text about the photo3</div>
</div>
Sometimes, IE6 does not honor the setting and you have to resort to the cLFlaVA hack.
有时，IE6 不支持该设置，您必须求助于 clFlaVA hack。
回答by cLFlaVA
Floating an element takes it out of the flow of the document, therefore it will not take up space in the general flow when rendering on the screen. There are other ways of handling this, but here's a hack:
浮动元素会将其从文档流中取出，因此在屏幕上渲染时不会占用一般流中的空间。还有其他处理方法，但这里有一个技巧：
<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>
回答by TJ L
A quick and dirty way to do it would be to float the containing div as well.
一种快速而肮脏的方法是浮动包含的 div。
回答by Steve Perks
Adding <div style="clear:both;"></div>is a complete hack and kills your ability to change your mind at a later date. The correct solutions is to use pure css with overflow: hidden;or zoom: 1;.
添加<div style="clear:both;"></div>是一个完整的技巧，会扼杀您日后改变主意的能力。正确的解决方案是将纯 css 与overflow: hidden;或一起使用zoom: 1;。
However, there's a little more to it than just adding overflow: hidden as you'll also need to make sure that the containing block has a width attribution too.
但是，除了添加 overflow: hidden 之外，还有更多内容，因为您还需要确保包含块也具有宽度属性。
I'd also like to point out that in the above question and approved answer, what was the point of floating the image in the first place if the text is immediately told to clear it?
我还想指出，在上述问题和批准的答案中，如果立即告诉文本清除它，首先浮动图像的意义何在？
回答by Steve Perks
I had a similar problem here where my images were overflowing my div:
我在这里遇到了类似的问题，我的图像溢出了我的 div：
< div id="offer"> < div class="inner"> < img src="offer.png" alt="">
<div id="offer"> <div class="inner"> <img src="offer.png" alt="">
where i had to have my image float:right; so that the text would appear on the left side of it and fill the space. I couldn't figure out why the heck it would overflow like that, but tj111's "quick and dirty" method of making #offer{float: left/right/upmycornhole;} totally solved the problem, and didn't reposition the div since the containing div is inside a wrapper that holds it in place on the page.
我必须让我的图像浮动：对；这样文本就会出现在它的左侧并填充空间。我不明白为什么它会像那样溢出，但是 tj111 制作 #offer{float: left/right/upmycornhole;} 的“快速而肮脏”的方法完全解决了这个问题，并且没有重新定位 div，因为包含 div 位于将其固定在页面上的包装器内。
Thanks tj you're a life saver!!!
谢谢 tj 你是一个救星！！！
