Html 为什么我的 div 重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16017893/
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
Why are my divs overlapping?
提问by Paul
I'm trying to create a parent div inside a list element that contains two children div for the left and right. The left will contain an image and the right will contain two additional divs that contain some text and a timestamp.
我正在尝试在包含左右两个子 div 的列表元素中创建一个父 div。左边将包含一个图像，右边将包含两个额外的 div，其中包含一些文本和时间戳。
I can't get the left and right divs to display without overlapping.
我无法在不重叠的情况下显示左右 div。
My HTML Looks like this:
我的 HTML 看起来像这样：
<ul class="activity-comments">
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 1</small>
</div>
<div>
<small>Posted 1 day ago</small>
</div>
</div>
</li>
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 2</small>
</div>
<div>
<small>Posted 2 days ago</small>
</div>
</div>
</li>
</ul>
Take a look at this jsfiddle
看看这个jsfiddle
What am I missing?
我错过了什么？
采纳答案by Travesty3
They are overlapping because you are floating a div, but aren't clearing the float.
它们重叠是因为您正在浮动一个 div，但没有清除浮动。
Use the clearfix method to clear the float. Add a class containerto your container divs and use this CSS:
使用 clearfix 方法清除浮动。将一个类添加container到您的容器 div 并使用此 CSS：
.container {
border: solid 1px #ff0000;
zoom: 1; /* IE6&7 */
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.
您还会注意到我删除了您的内联 CSS。这使您的代码更易于维护。
回答by ClandestineCoder
your thumbnail is setting the picture to a specific height of 41px. Either change the picture size, or change the div size or set the overflow of the outer div.
您的缩略图将图片设置为 41 像素的特定高度。要么改变图片大小，要么改变div大小或设置外层div的溢出。
