0

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

这是一个jsfiddle：http: //jsfiddle.net/CcPyG/

要获得更多许可，这里是我的代码：

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;
}
4

5 回答 5

2

你item持有sub-item. 问题是它item的固定高度为 35px。sub-item上边距为 40px。这意味着从 item 顶部到 top 的距离sub-item是 40 px —— 这比item它本身的整个尺寸还要大！

要解决此问题，请删除 CSS 中的height: 35pxfrom .item。请参阅此更新的 JSFiddle。

于 2013-06-10T15:31:52.023 回答
2

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

如果要显示没有重叠的所有内容，请将高度设置为auto? 我想我需要知道你为什么选择这个，height:35px然后我才能形成一个更好的解决方案。

于 2013-06-10T15:32:08.903 回答
2

请删除中的高度.item：

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    **/*height: 35px;*/**
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}
于 2013-06-10T15:32:32.330 回答
1

您在 .item div 上设置的高度小于 .sub-item 的上边距。去掉高度，它会正常流动。你想用这个来达到什么目的？

于 2013-06-10T15:33:04.847 回答
1

试试这个：

.item {
    color: black;
    font-family: Menu;
    /*height: 35px;*/
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    width: 250px;
}
于 2013-06-10T15:35:20.133 回答