Question

我有一系列堆叠的<div>标签。它们都应该与窗户大小相同;但是，只有系列中的第一个是正确的大小。

CSS

.left {
    padding: 5% 10%;
    height: 100%;
    background-color: #364d9d;
    position: absolute;
}
.right {
    padding: 5% 10%;
    right: 0;
    height: 100%;
    background-color: #2f463d;
    position: absolute;
}
#yes {
    z-index: 6;
}
#no {
    z-index: 5;
}
#violence {
    z-index: 4;
}
#peace {
    z-index: 3;
}

HTML

<div class="left" id="yes">
    <p>Yes</p>
</div>
<div class="right" id="no">
    <p>No</p>
</div>
<div class="left" id="violence">
    <p>Violence</p>
</div>
<div class="right" id="peace">
    <p>Peace</p>
</div>

JSFiddle

JSFiddle with original width: 50% that caused an overlap

我尝试将DIV设置为相对位置，并浮动并清除它们。为什么会发生这种情况，我该如何解决？

Answer 1

<div>上的填充对其大小有影响。从<div>中删除填充并将其移动到孩子身上。您还可以添加其他<div>，而不是将填充应用于<p>。

.right, .left  {
    width: 50%;
    padding-top: 5%;
    padding-bottom: 5%;
}
.right p, .left p {
    padding-left: 10%;
    padding-right: 10%;
}

https://jsfiddle.net/djo2L8mn/11/

DIV适当大小的一半

1 个答案: