我正在尝试使用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/

10-12 13:01
查看更多