我有一个容器 div,里面有几个子 div。父 div 有背景颜色,但是,这似乎并没有扩展到最后几个子 div。请看下面的代码:
http://codepen.io/tombarton/pen/aNaGGa
<div class="container">
<ul>
<li>
...
</li>
</ul>
<hr>
<div class="checkout">
<div class="left">
...
</div>
<div class="right">
<div class="button">
...
</div>
</div>
</div>
</div>
CSS
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
}
.container {
display: block;
max-width: 600px;
height: 100%;
margin: 20vh auto;
padding: 0 3%;
background-color: white;
text-align: justify;
}
ul {
margin: 0;
padding: 0;
}
li {
position: relative;
list-style-type: none;
margin: 20px auto;
}
.checkout {
display: block;
margin-top: 10px;
width: 50%;
float: right;
}
.left {
display: block;
width: 55%;
float: left;
line-height: 40px;
text-align: right;
}
.right {
display: block;
width: 40%;
margin: auto;
float: right;
cursor: pointer;
}
我猜这是因为最后两个 div 没有内容,但我不是 100% 确定。有人有什么想法吗?
谢谢。
最佳答案
您需要添加 <div style="clear:both;"></div>
在父 div 中的最后一个 float 元素之后。
你的新代码变成这样:
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
}
.container {
display: block;
max-width: 600px;
height: 100%;
margin: 20vh auto;
padding: 0 3%;
background-color: green;
text-align: justify;
}
h1 {
font-size: 1em;
letter-spacing: 1px;
font-weight: 700;
padding-top: 20px;
}
ul {
margin: 0;
padding: 0;
}
.inline-row {
display: inline-block;
height: 56px;
vertical-align: top;
}
li {
list-style-type: none;
margin: 20px auto;
}
.image-container {
width: 24%;
img {
width: 100%;
height: auto;
}
}
.product {
width: 58%;
h2 {
margin: 0;
padding: 0;
line-height: 28px;
vertical-align: top;
}
p {
margin: 0;
padding: 0;
line-height: 28px;
}
}
.cost {
width: 13%;
text-align: right;
p {
margin: 0;
padding: 0;
line-height: 28px;
}
}
.delete {
float: right;
width: 3%;
text-align: right;
font-size: 0.7em;
font-weight: 700;
line-height: 28px;
cursor: pointer;
}
hr {
margin-top: 30px;
}
.checkout {
display: block;
margin-top: 10px;
width: 50%;
float: right;
}
.left {
display: block;
width: 55%;
float: left;
line-height: 40px;
text-align: right;
}
.right {
display: block;
width: 40%;
margin: auto;
float: right;
cursor: pointer;
}
.button {
height: 40px;
width: 100%;
border: 1px black solid;
border-radius: 20px;
text-align: center;
line-height: 40px;
font-weight: 700;
}
.clear{
clear:both;
}
<div class="container">
<h1>Shopping Cart</h1>
<ul>
<li>
<div class="inline-row image-container">
<img src="http://placekitten.com/150/56">
</div>
<article class="inline-row product">
<h2>barolo.</h2>
<p>barolo di castiglione falletto</p>
</article>
<div class="inline-row cost"><p>39.99 EUR</p></div>
<div class="inline-row delete">X</div>
</li>
<li>
<div class="inline-row image-container">
<img src="http://placekitten.com/150/56">
</div>
<article class="inline-row product">
<h2>barolo.</h2>
<p>barolo di castiglione falletto</p>
</article>
<div class="inline-row cost"><p>39.99 EUR</p></div>
<div class="inline-row delete">X</div>
</li>
<li>
<div class="inline-row image-container">
<img src="http://placekitten.com/150/56">
</div>
<article class="inline-row product">
<h2>barolo.</h2>
<p>barolo di castiglione falletto</p>
</article>
<div class="inline-row cost"><p>39.99 EUR</p></div>
<div class="inline-row delete">X</div>
</li>
</ul>
<hr>
<div class="checkout">
<div class="left">TOTAL 148.98 EUR</div>
<div class="right">
<div class="right button">CHECKOUT</div>
</div>
</div>
<div class="clear"></div>
</div>
关于html - Div 背景颜色不会扩展到子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36917660/