Question

我附加了我的HTML和CSS，希望有人可以帮助我。基本上我有一个右侧边栏div，内容不会推到顶部。当我使用位置和高度属性时，内容只会漂浮在整个页面上，甚至不会保留在右侧边栏中。我希望有人可以指出我正确的方向，我看了很多帖子，我尝试的任何东西似乎都没有用。

HTML：

<div id="container">

<div id="head">
</div>          


<div id="menuTop">
</div>

<div id="content">
</div>

<div id="sidebar">
</div>

<div id="footer">
</div>  
</div>

CSS：

#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}

#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}

#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}

Answer 1

CSS Box Model 101 - div（或任何元素）的实际宽度为width + padding + borders

所以你的两个浮动div加起来为1001px

内容div @ 750px + 1px边框实际上是751px宽，使其宽度为749px并且一切都应该很好

Answer 2

#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}

#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}

#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}



<div id="container">

<div id="head">head
</div>          


<div id="menuTop">
</div>

<div id="content">ssss
</div>

<div id="sidebar">ffff
</div>
    <br style="clear:both;" />
<div id="footer">
</div>  
</div>

CSS：边栏div不会留在原地！

2 个答案: