Question

我的页面上有很多div，但有两种类型。第一种是“主要项目”，第二种是“子项目”。问题是子项与主项重叠。

如需更多许可，我的代码是：

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}
.sub-item {
    margin-top: 40px;
}

Answer 1

您的item拥有sub-item。问题是item的固定高度为35px。 sub-item的上限为40px。这意味着从项目顶部到sub-item顶部的距离为40 px - 这大于item本身的整体大小！

要解决此问题，请从CSS中的height: 35px中删除.item。请参阅this updated JSFiddle。

Answer 2

父height的{{1}}为35px。它们重叠的原因是因为......好吧，下一个div从当前结束的地方开始，并且由于你给了孩子一个.item的边距，它出现在下一个div中。

如果您想要显示没有重叠的所有内容，请将高度设置为40px？我想在形成更好的解决方案之前，我需要知道为什么你选择auto。

Answer 3

请删除.item：

中的高度

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    **/*height: 35px;*/**
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}

Answer 4

您在.item div上设置的高度小于.sub项目的上边距。移除高度，它将正常流动。你想用这个来实现什么？

Answer 5

试试这个：

.item {
    color: black;
    font-family: Menu;
    /*height: 35px;*/
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    width: 250px;
}

css - Divs没有以正确的方式进入

5 个答案: