两个Div之间的CSS水平空间问题

Question

使用top-feature-faq和mid-feature-faq，两个div之间的宽度过大。

以下是CSS：在此示例中，top-feature-faq的位置为：relative

#top-feature-faq 
{
height:330px;
width: 800px;
margin: 12px 0 0 17px;
background: red;
position: relative;
overflow:hidden;
text-align: left;
}
#mid-feature-faq
{
margin:350px 0 0 17px;
width:800px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;
clear: both;
}

<div id="top-feature-faq">
    <div style="clear: both;">
    </div>
</div>
<<div id="mid-feature-faq">
    <div style="clear: both;">
    </div>
</div>

Answer 1

首先，在我说为什么它不起作用之前 - 你为什么要使用绝对定位？这是不必要的，而这正是造成问题的原因。 CSS不是它的原因 - 这是因为数学不正确。

#top-feature = 330px身高+ 12px头差距。 （绝对定位）

#mid-feature = 350px top-margin。

如果您将#top-feature的上边距更改为20px，或将#mid-feature的上边距更改为342px，问题就会自行解决。

编辑：

#top-feature { height:330px; width: 848px; margin: 12px 0 0 17px; /*background: #E4EAEF;*/ background: orange; text-align: left; } #mid-feature { margin:0 0 0 17px; width:848px; height:318px; background-color:Olive; position:relative; overflow:hidden; }

Answer 2

部分问题存在，因为不在top-feature-faq

之内

<div id="top-feature-faq">
    <div style="clear: both;">
    </div>
</div>
<div id="mid-feature-faq">
    <div style="clear: both;">
    </div>
</div>

Answer 3

简单。您在页面上的容器之间有一个清除div与问题。这意味着350px的上边距从清算div开始，而不是从容器的顶部开始。

卸下：

<div style="clear: both;"></div>

在top-feature-faq和mid-feature-faq之间或更改mid-feature-faq的上边距。