交换我的内容和侧边栏的位置？

Question

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

我的代码

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>

我做错了什么？

Answer 1

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

虽然看起来可能违反直觉，但如果必须向右浮动，只需切换元素的顺序即可。

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

<强> DEMO

Answer 2

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

Answer 3

为什么不向左浮动内容，然后右侧浮动？而不是正确的，这是你现在拥有的

e.g。

.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;
}