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

问题描述：

我有这个网站：

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

和我解决了使用：

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

对于这个例子：https://jsfiddle.net/VixedS/fcx2aLLa/

但现在我认为。内容而来的之前。边栏，

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

我怎样才能获得相同的结果只是使用css？

我不想失去身体的剩余空间的宽度。内容带或不带.sidebar。

所以请记住，说给。内容浮向右前。另外，我不知道哪个页面有.sidebar。

浮动的内容吧？ - https://jsfiddle.net/fcx2aLLa/1/ –

@Paulie_D我想过那个，但我会放弃它。我的意思是父容器（流体）的剩余空间。 – Vixed

用'calc'手动添加宽度？ –

答

该解决方案是非常强大的。适用于任何浏览器，任何设备。对于响应式设计和第三栏也是一个很好的方法。

更新：

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

我不知道**。sidebar **何时出现，所以我怎么总是给**保留一个保证金。 – Vixed

它已经做到了。删除'sidebar'，你会看到它是如何工作的。 – NiZa

如果没有'sidebar'，你想拥有'content'全宽？ – NiZa

答

请按照以下方法操作。使用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>

我真的很喜欢你的答案，但是请你能为我解释一下吗？为什么**显示：table **会帮助我？流体设计安全吗？ – Vixed

Ups抱歉，但我不能浮动到正确的内容，因为我不知道当侧边栏出现:( – Vixed

@ Vixed如果侧栏不出现'内容'会自动向左移动。 – ketan

答

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>

必须至少支持IE8 – Vixed

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

相关推荐