Div水平重叠。

Question

我试图用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>

​

这完全是基本的，但我找不到答案，这让我发疯了。我遗漏了什么？

Answer 1

如果在CSS中添加float:left到“..row 3”，它将位于底部。

还在".what，.why“类中添加”框大小:边框框“。这将允许填充而不增加div的宽度，使其仅保持其父div宽度的50%。

Answer 2

男人：http://jsfiddle.net/leojavier/zrfpbvkq/1/

.row:nth-of-type(1) {
    width:100%;
    background:pink;
    text-align:center;
    padding:20px;
}
.row:nth-of-type(2) {
    width:100%;
    padding:20px;
}
.row:nth-of-type(2) div {
    padding:10px;
    width:50%;
    float:left;
    box-sizing: border-box;
}

.row:nth-of-type(3) {
    clear:both;
    width:100%;
    padding:20px;
    text-align:center;
}

Answer 3

浮动元素有一个常见的问题。第二行需要一个清除方法，例如overflow: hidden;，以恢复其高度并防止最后一行重叠。我为所有三行应用了清除程序，下面是工作示例https://jsfiddle.net/dore4sr8/。

css：

.row {
    overflow: hidden;
}
.row-1 {
    background: pink;
    padding: 20px 0;
}
.row-2 {
    width:75%;
    margin: 0 auto;
}
.row-3 {
    width: 100%;
    background: whitesmoke;
}
.what, .why {
    margin: 0;
    width: 50%;
    float: left;
    padding: 20px;
}

h3 {
    text-align: center;
}