0

我不确定为什么，但我创建了两个 CSS 类content和sidebar1，目的是将侧边栏放在右侧。但不管我做什么，当我把<div>s 放进去时，侧边栏最终会在左边！

我的代码

CSS

.container {
    max-width: 1500px;
    min-width: 1200px;
    background-color: #000000;
    margin: 0 auto; 
}
.sidebar1 {
    float: right;
    width: 200px;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 1000px;
    float: right;
    border-left-color: #FFF;
    border-right-color: #FFF;
}

HTML

<div class="container">

  <div class="content">

    <h1>Heading</h1>
    </div>

  <div class="sidebar1">
    </div>
</div>

我究竟做错了什么？

4

3 回答 3

2

当您将多个元素向右浮动时，DOM 中的后续元素将出现在第一个元素的左侧。

尽管这似乎违反直觉，但如果您必须向右浮动，只需切换元素的顺序即可。

<div class="container">
    <div class="sidebar1">
      Sidebar
    </div>
    <div class="content">
         <h1>Heading</h1>
    </div>
</div>

演示

于 2013-03-19T17:16:10.853 回答
1

您的顺序是错误的——首先，您的内容 div 尽可能正确地浮动，然后，您的侧边栏会浮动。（所以基本上，向右浮动多个内容会颠倒顺序。）你能安排侧边栏在源中的内容 div 之前吗？

于 2013-03-19T17:15:34.557 回答
0

为什么不将内容向左浮动，侧栏向右浮动呢？而不是你目前拥有的两个权利

例如

.container {
    max-width: 1500px;
    min-width: 1200px;
    background-color: #000000;
    margin: 0 auto; 
}
.sidebar1 {
    float: right;
    width: 200px;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 1000px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
于 2013-03-19T17:11:25.610 回答