Question

我希望创建一个三列布局，其中左列是固定宽度，中间和右列各自是剩余宽度的50％。我还希望左右列是非骂人的。

我以两种不同的方式取得了部分成功。 The first创建会实现动态列目标，但右侧边栏会随页面一起显示。我这样做了一个固定位置左栏和另一个固定位置容器，它们共同占据了整个页面。然后我将右侧边栏放在第二个容器中，宽度设置为50％。

<section id=leftSidebar>
    <p> leftSidebar </p>
</section>

<div id=main>

    <section id=middle>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
    </section>

    <section id=rightSidebar>
        <p> rightSidebar </p>
    </section>
</div>

上述布局的另一个问题是内容会因#main {overflow: auto}而滚动。理想情况下，我希望内容与主页面一起滚动。

non-scrolling code比较简单，只需要一个固定的左右侧边栏，静态宽度。

如果可能的话，我想用css实现这个目标。

Answer 1

使用css calc() function

<强> FIDDLE

这里的诀窍是将中间和右侧的cols设置为剩余空间的50％。

你可以用calc（）：

这样做

#middle, #rightSidebar
{
    width: calc(50% - 40px); /* equals half of 100% - 80px */
}

Answer 2

在您的示例中，右列包含在主div中。在打开列部分之前尝试关闭它：

<section id=leftSidebar>
    <p> leftSidebar </p>
</section>

<div id=main>

    <section id=middle>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
    </section>

</div>

    <section id=rightSidebar>
        <p> rightSidebar </p>
    </section>

带有非滚动流体宽边栏的3列布局（jsFiddle）

2 个答案: