创建 3 列布局的方法：流体 - 固定 - 流体

Question

我们如何创建一个 3 列布局，Fluid - Fixed - Fluid，如下图所示。有不止一种选择吗？如果有，各有什么优缺点？

注意：如果答案与我已经发布的三个不同，请随意添加更多答案。另外，我知道以前有人问过这个问题，但我无法找到所有三个最新答案的地方。

Answer 1

选项

有 三种 四种 方法可以做到这一点，所有方法都使用不同的 CSS，并且具有不同级别的复杂性和浏览器兼容性。在所有 三个 四个中，我们从三个 divs 开始，它们创建了我们的三列。

方法 1 - 最兼容，最长的代码。

方法 2 - 中等兼容，中等代码。

方法 3 - 兼容性最低，代码最短。

所有  三个  四个都会产生我们想要的，如下面的截图所示：

编辑：

vals 建议的方法 4 使用 CSS Flexbox 模型。详情见他的回答。

---

方法 1 - 额外的内部 div

在左右流体列内插入一个额外的div。

优点：这种方法兼容性最好，甚至回到 IE6。

缺点：我们必须额外插入一个div，而且CSS是所有三种方法中最长的。

Working Fiddle

HTML：

<div class="wrap">
    <div class="fluid left">
        <div class="inner">
            Fluid Box
        </div>
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid right">
        <div class="inner">
            Fluid Box
        </div>
    </div>
</div>

CSS：

.wrap {
    overflow:hidden;
}
.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:50%;
}
.left {
    margin-left:-250px;
}
.left .inner {
    margin-left:250px;
}
.right {
    margin-right:-250px;
}
.right .inner {
    margin-right:250px;
}

---

方法 2 - 使用 box-sizing CSS 样式

如果你愿意使用一些CSS3，你可以设置左右流体列有box-sizing:border-box;。这让我们可以使用方法 1 的内部 divs 中的 margin，并将其作为填充放在外部 divs 中，而不会干扰它们的 widths。 box-sizing 并非所有旧版浏览器都支持。

优点：代码更简洁，因为我们没有额外的内部div。 CSS 也稍微干净一些。

缺点：浏览器兼容性。我们要去lose IE6 and IE7。

Working Fiddle

HTML：

<div class="wrap">
    <div class="fluid left">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid right">
        Fluid Box
    </div>
</div>

CSS：

.wrap {
    overflow:hidden;
}
.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:50%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.left {
    margin-left:-250px;
    padding-left:250px;
}
.right {
    margin-right:-250px;
    padding-right:250px;
}

---

方法 3 - 将calc() 用于width

顺应潮流，我们可以使用包含更新 CSS 的方法，以获得更简洁但向后兼容更少的代码。如果我们使用width:calc(% - px)计算左右流体柱的width，我们不需要box-sizing，或者额外的divs。

优点： CSS 比方法 2 更简洁、更短。

缺点：浏览器兼容性。我们不仅丢失了旧版本的 IE，而且丢失了除 newest versions of most mobile browsers. 之外的所有内容。

Working Fiddle

HTML：

<div class="wrap">
    <div class="fluid">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid">
        Fluid Box
    </div>
</div>

CSS：

.wrap div {
    height:300px;
    float:left;
}
.fixed {
    background-color:lightblue;
    width:500px;
}
.fluid {
    background-color:orange;
    width:-webkit-calc(50% - 250px);
    width:-moz-calc(50% - 250px);
    width:calc(50% - 250px);
}

---

总结

方法 1 - 最兼容，最长的代码。

方法 2 - 中等兼容，中等代码。

方法 3 - 兼容性最低，代码最短。

Answer 2

方法 4 - 弹性模型

类似于 AndyM 帖子中的方法 3，此方法依赖于 CSS3，并且仅适用于现代浏览器。然而，正如它的名字所暗示的那样，它灵活且易于实现。我们使用了三个新的 CSS 属性：display:flex; flex-grow:; 和 flex-basis:;。

我们将第一个添加到#wrap，它告诉浏览器内部的项目将使用 flex 模型进行布局。后两个告诉浏览器一个项目是否会增长（是否灵活），以及初始宽度是多少。

优点：CSS 简洁简洁，以后很容易更改。与方法二和三不同，固定宽度只需要声明一次。

缺点：浏览器兼容性。这比calc() 的兼容性略好，但相差不大。我们现在可以使用它，但我们lose basically all but the newest versions of most mobile browsers, and of Internet Explorer。

Working Fiddle

HTML：

<div class="wrap">
    <div class="fluid">
        Fluid Box
    </div>
    <div class="fixed">
        Fixed Box
    </div>
    <div class="fluid">
        Fluid Box
    </div>
</div>

CSS：

  .wrap {
    display: flex;
    height:300px;
} 
.fixed {
    background-color:lightblue;
    flex-grow: 0;  /* Does this box grow? 0 means no. */
    flex-basis: 500px;
} 
.fluid {
    background-color:orange;
    flex-grow: 1;
    flex-basis: 0px;
}

我已对此进行了编辑，以使示例尽可能接近方法 1-3 中的示例，以便更轻松地比较这些方法。最初的帖子对 vals 的所有荣誉，我从未听说过这种方法。 - 安迪M

Original Fiddle