css - 填充左右浮动元素之间的水平空间

Question

我在这里找到了一个解决我需要做的事情的答案，但它似乎对我来说并不完美。我的侧边栏 div 左右浮动。我想在中间贴一个 div 并填充空间。该答案中的技术适用于左 div，但它将右 div 向下推到下一行。我在 CodePen 上做了一个快速演示来展示这个问题。

谁能建议一种方法来解决这个问题，以便所有的 div 都在同一行？

更新：我意识到我可以轻松地使用所有 div 宽度的百分比来做到这一点，但我确实需要保持侧边栏的静态宽度。

Answer 1

一种方法是更改​​ HTML 的顺序（将右侧边栏放在左侧之前）

<div class="page-grid">
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
 <div id="content">Content area</div>
</div>

http://codepen.io/anon/pen/kHmjd

Answer 2

这是使用Dynamic Drive 的CSS Layouts中的一个示例

我喜欢这个，特别是因为它在语义上保留了内容的顺序。首先交付主要内容，然后是两侧列。

HTML

<div class="page-grid">
    <div id="contentwrapper">
        <div id="content">Content area</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
</div>

CSS

#contentwrapper {
    float: left;
    width: 100%;
}
#content {
    margin: 0 15em;
}
.sidebar {
    float: left;
    width: 15em;
}
.sidebar.left {
    margin-left: -100%;
}

.sidebar.right {
    margin-left: -15em;
}