我正在尝试使用div创建行,但是它们是重叠的。我想要三行,第二行分为两列。第一行很棒,但是第二行和第三行水平重叠。
.row {
background: pink;
padding: 20px 0;
}
.row-2 {
width:75%;
margin: 0 auto;
}
.what, .why {
margin: 0;
width: 50%;
float: left;
padding: 20px;
}
.row-3 {
width: 100%;
background: whitesmoke;
}
h3 {
text-align: center;
}
<div class="row">
<h3>Testing to see where this goes.</h3>
</div>
<div class="row-2">
<div class="what">Chocolate cake liquorice cookie halvah apple pie fruitcake. Pudding apple pie cookie danish apple pie cotton candy candy jelly. Cookie soufflé muffin candy tiramisu caramels chocolate cake.
</div>
<div class="why">Chocolate bar chupa chups cheesecake soufflé croissant croissant marshmallow. Cookie soufflé muffin candy tiramisu.
</div>
</div>
<div class="row-3">
<h3>Testing to see where this goes.</h3>
</div>
这完全是基础,但是我找不到答案,这一直让我发疯。我想念什么?
最佳答案
如果在CSS中将float:left添加到“ .row-3”,它将位于底部。
还要添加“ box-sizing:border-box;”到“ .what,.why”类。这样就可以在不增加div宽度的情况下进行填充,以使它们仅保留其父div宽度的50%。
关于html - div水平重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32340339/