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

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 获得相同的结果？

I don't want to loose the remaining space of the body for the width of .content with or without .sidebar.

所以请记住，在说将 .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 树之后的边栏

Sidebar on the left of the content but after in the dom tree

html

css

dom-traversal