Question

我发现an answer here解决了我需要做的事情，但它似乎并不适合我。我有侧边栏divs左右浮动。我想在中间贴一个div并填补空间。该答案中的技术适用于左侧div，但它将右侧div推向下一行。我吐了a quick demo on 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

这是使用动态路径an example

中的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;
}

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

2 个答案: