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

Question

如何创建3列布局，Fluid-Fixed-Fluid，如下图所示。有多个选项吗？如果是这样，每个人的利弊是什么？

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

Answer 1

选项

有三种 四种方式，所有这些都使用不同的CSS并具有不同级别的复杂性和浏览器兼容性。在所有三 四中，我们从三个div开始创建我们的三列。

方法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的内部margin中的div，并将其作为填充放在外部div中，而不会干扰他们的width。但是，所有旧版浏览器都不支持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计算左右流体列的width:calc(% - px)，则不需要box-sizing或额外的div。

优点： 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 - Flex模型

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

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

优点 ：CSS干净简洁，以后很容易更改。方法2＆amp; 3，固定宽度只需要声明一次。

缺点 ：浏览器兼容性。这比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中的示例，以便更轻松地比较这些方法。对于最初的帖子，所有人都赞不绝口，我从来没有听说过这种方法。 - 安迪·

Original Fiddle