Question

我需要在内容的左侧添加侧边栏。

我有这个HTML：

<div class="sidebar"></div>
<div class="content"></div>

我解决了使用：

.sidebar{
    width: 280px;
    float: left
}
.sidebar + .content{
    margin-left: 300px
}

对于此示例：https://jsfiddle.net/VixedS/fcx2aLLa/

但现在我的 .content 位于 .sidebar 之前，

<div class="content"></div>
<div class="sidebar"></div>

如何才能获得相同的结果只使用css ？

我想要在 .sidebar 的宽度 .content 下放松身体的剩余空间。

所以请记住，然后再将 .content 浮动到右边。另外，我不知道哪个页面有 .sidebar 。

Answer 1

按照以下方式行事。将float:right用于sidebar，将display:table用于其父级。

body {
    display: table;
}
.content {
    float: right;
}
.sidebar{
    width: 280px;
    float: left;
    background:#EEE; // just for this example
}
.sidebar + .content{
    margin-left: 300px
}

<div class="content">Spaghetti</div>
<div class="sidebar">Pizza <br /> Hobby</div>

Answer 2

这个解决方案非常强大。适用于所有浏览器，任何设备。这也是响应式设计和第三列的好方法。

<强>更新

.container {  
  overflow:auto; 
}

.sidebar {
  width: 280px;
  float: left;
  background: #EEE;
  margin-left: -100%;
}

.content {
  float: left;
  width: 100%;
}

.center {
  margin-left: 280px;
}

.container > div:only-child > div.center {
  margin-left: 0;
}

<div class="container">
  <div class="content">
    <div class="center">
      Spaghetti
    </div>
  </div>
  <div class="sidebar">
    Pizza
    <br /> Hobby
  </div>
</div>

Answer 3

Flexbox ...意味着您不必使用浮动...并且您可以根据需要重新排序元素。

支持IE10及以上。

 body {
   display: flex;
 }
 .sidebar {
   width: 280px;
   background: #aaa; // just for this example
   order: 0;
 }
 .content {
   flex: 1;
   order: 1;
   background: plum;
 }

<div class="content">
  Spaghetti</div>
<div class="sidebar">Pizza
  <br />Hobby</div>

内容左侧的侧边栏，但在dom树之后

3 个答案: