不能把我的侧边栏放在内容的右边吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我有一个网页,它具有盛器内两个div contentsidebar1。我不知道为什么,但每当我把我的sidebar1div放在右边,在contentdiv之后,我就会在我的侧边栏下面,而不是在它旁边!

我的代码:

HTML

<div class="container">

  <div class="content">
    <p>&nbsp;</p>
    <p>&nbsp;</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; 
}
提问于
用户回答回答于

内容比父类小10px,因此旁边没有192px侧边栏的空间(960px的20%)。

你可以做更像这样的事情:

<div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Main content</div>
</div>

#container {
    width: 980px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
}

#content {
    overflow: hidden;
}

上面的代码将侧边栏浮动到容器的右侧,然后内容div将占用容器中的任何剩余空间。该overflow: hidden通知DIV的大小决定,而不是仅仅占用了容器的整个宽度时,注意到该浮动元素的。为此,你必须在元素之前有浮动元素overflow: hidden

用户回答回答于

你实际上有三个<div>在你的容器里,我不知道那是不是故意的。你应该给你的.content一个width: 80%;

所属标签

可能回答问题的人

  • 爸爸

    腾讯 · 客户端安全 (已认证)

    4 粉丝4 提问5 回答
  • 找虫虫

    0 粉丝0 提问5 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问4 回答
  • uncle_light

    5 粉丝518 提问4 回答

扫码关注云+社区

领取腾讯云代金券