Question

我是脑子里的人，我知道这很简单。

有一个标题div，看起来很好。有一个左侧边栏div，显得很好，顶部依偎到标头div。

然后是一个主要内容div。有一个图像和h1看起来像你期望的头部div，但然后出现一个大的间隙，直到导航（在嵌套div）。导航在主内容div中正确，但此div的顶部始终与侧边栏内容的底部对齐。

我尝试过清楚的混合物：左边和两个以及漂浮和诸如此类的东西。如果在html内部我将侧边栏div移动到主内容div下方，那么主要内容没有间隙，但侧边栏有一个很大的顶部间隙，并且显示为主内容导航结束位置的底部。

我在这里错过了什么，提前谢谢！

Answer 1

您是否设置了任何宽度（或填充，边距，边框），这可能会使您的问题div太宽而无法适应？

请记住，如果您正在执行以下操作：

width: 100%;
border: 1px solid;

然后你的元素占据100％宽度+2像素。

Answer 2

听起来你在源顺序中首先出现了侧边栏。

如果你有两个div（侧边栏，主要）浮动在不同的方向，那么看看他们共享的宽度。减小一个div的宽度（您应该在浮动上设置宽度），直到它们的组合宽度（包括填充，边距，边框）适合可用空间。（为简洁起见，我只会在我的例子中使用宽度。）

当这种效果发生时，根据我的经验，在源顺序中稍后出现的那个是防止在宽度上滑动到它的位置的那个。

<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>

#sidebar＆amp;的宽度#mainContent太宽（#mainContent被击倒）：

 #container{
 **width:950px;**
 margin:0 auto;
 background:blue;
 }

#mainContent{
float:right;
**width:651px;**
background:red;

}

#sidebar{
float:left;
**width:301px;**
background:green;
}

#sidebar＆amp;的宽度#mainContent适合容器：

#container{
 **width:950px;**
 margin:0 auto;
 background:blue;
 }

#mainContent{
float:right;
**width:650px;**
background:red;
}

#sidebar{
float:left;
**width:300px;**
background:green;
}

btw ...如果你将两个元素以相同方向浮动，但它们的组合宽度太宽，源顺序中的最后一个元素将适合上面浮动元素的下方。

Answer 3

您的h1或img是否有最高保证金？它会从mainContent div的顶部伸出并将其推下来。

主栏显示侧栏列结束的位置

3 个答案: