无法将我的侧边栏放在内容的右侧？
无法将我的侧边栏放在内容的右侧？
提问于 2013-03-17 02:53:46
我有一个网页，它在容器中有两个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的新手，不理解我的问题。提前感谢！
回答 5
Stack Overflow用户
回答已采纳
发布于 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元素之前。
Stack Overflow用户
发布于 2013-03-17 02:59:26
尝试对.sidebar1使用float: left，或者重新排序，使侧边栏位于内容之前。
Stack Overflow用户
发布于 2013-03-17 03:02:04
您的容器中实际上有三个<div>，我不知道这是否是故意的。你应该给你的.content一个width: 80%;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15453286
复制相关文章
相似问题