我有一个网页,它在容器中有两个divs - content
和sidebar1
。我不知道为什么,但是每当我把我的sidebar1
div放在右边,在content
div之后,我的侧边栏在下面,而不是在它旁边!
我的代码:
HTML
<div class="container">
<div class="content">
<p> </p>
<p> </p>
<h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
<!-- TemplateBeginEditable name="Content" -->Just some
<!-- end .content -->
dummy text.<!-- TemplateEndEditable --></div>
<div class="sidebar1">
</div>
<div class="footer">
Footer text<!--end .footer --></div>
<!-- end .container --></div>
CSS
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 950px;
float: left;
border-left-color: #FFF;
border-right-color: #FFF;
}
.container {
width: 960px;
background-color: #000000;
margin: 0 auto;
}
我仍然是HTML的新手,不理解我的问题。提前感谢!
发布于 2013-03-17 03:04:10
内容比父级小10px,因此旁边没有空间放置192px的侧边栏(960px的20%)。
你可以做更多这样的事情:
#container {
width: 450px;
margin: 0 auto;
}
#sidebar {
float: right;
width: 200px;
background: #dff;
}
#content {
overflow: hidden;
background: #fdd;
}
<div id="container">
<div id="sidebar">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</p>
</div>
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
上面的代码会将侧边栏放在容器的右边,然后content div会占据容器中剩余的空间。overflow: hidden
告诉div在决定大小时要注意浮动元素,而不是只占用容器的整个宽度。为此,您必须将浮动元素放在overflow: hidden
元素之前。
发布于 2013-03-17 02:59:26
尝试对.sidebar1
使用float: left
,或者重新排序,使侧边栏位于内容之前。
发布于 2013-03-17 03:02:04
您的容器中实际上有三个<div>
,我不知道这是否是故意的。你应该给你的.content
一个width: 80%;
。
https://stackoverflow.com/questions/15453286
复制相似问题