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”，它将位于底部。

还添加“box-sizing：border-box;”到“.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

浮动元素存在常见问题。第二行需要一个clearfix，例如overflow: hidden;来恢复它的高度并防止最后一行重叠它。我为所有三行应用了clearfix，这是工作示例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;
}

Div是水平重叠的

3 个答案: