Html CSS 内容溢出包含 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4715577/
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
CSS content overflowing containing div
提问by kaese
Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom):
目前有一些 DIV 与它们包含的 DIV 重叠的问题。见下图（底部的 3 个产品）：
All the body content of the page is held within the #content DIV:
页面的所有正文内容都保存在 #content DIV 中：
div#content {
width: 960px;
float: left;
background-image: url("../img/contentBg.png");
background-repeat: repeat;
margin-top: 10px;
line-height: 1.8em;
border-top: 8px solid #5E88A2;
padding: 10px 15px 10px 15px;
}
And here is the CSS for the product boxes within the #content div:
这是#content div 中产品框的 CSS：
.upper {
text-transform: uppercase;
}
.center {
text-align: center;
}
div#products {
float: left;
width: 100%;
margin-bottom: 25px;
}
div.productContainer {
float: left;
width: 265px;
font-size: 1em;
margin-left: 50px;
height: 200px;
padding-top: 25px;
text-align: right;
}
div.product {
float: left;
width: 200px;
}
div.product p {
}
div.product a {
display: block;
}
div.product img {
float: left;
}
div.product img:hover {
opacity: 0.8;
filter: alpha(opacity = 80);
}
div.transparent {
opacity: 0.8;
filter: alpha(opacity = 80);
}
And here is the HTML for the boxes:
这是框的 HTML：
<div class="productContainer">
<div class="product">
<h2 class="upper center">A2 Print</h2>
<a href='../edit/?productId=5&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a>
<p class="upper">16.5 inches x 23.4 inches<br /><strong>£15.99</strong></p>
<p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p>
<p><a href='../edit/?productId=5&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">A1 Print</h2>
<a href='../edit/?productId=11&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a>
<p class="upper">23.4 inches x 33.1 inches<br /><strong>£19.99</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=11&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">Poster Print (60cm x 80cm)</h2>
<a href='../edit/?productId=12&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a>
<p class="upper">23.6 inches x 31.5 inches<br /><strong>£13.95</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=12&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy!
知道什么可能导致这些 DIV 重叠吗？我想要的是让所有的盒子都像预期的那样适合 #container div。这让我疯狂！
Cheers
干杯
回答by stecb
Did you try to set to the footer
您是否尝试设置为页脚
clear:both;
Also, set to the #content
另外，设置为#content
overflow:hidden;
回答by benhowdle89
Add overflow: auto; in your content div CSS :)
添加溢出：自动；在您的内容 div CSS 中 :)
回答by jsweazy
Something a lot of people use is called clearfix. here is the code:
许多人使用的东西称为 clearfix。这是代码：
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
To use this you just add the class clearfix to container. You will probably want to add it to whatever div is containing all the "productContainer"
要使用它，您只需将类 clearfix 添加到容器中。您可能希望将它添加到包含所有“productContainer”的任何 div
