html - 创建 3 列布局的方法 : Fluid - Fixed - Fluid

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 的内部 div 中的 margin，并将其作为填充放置在外部 div 中，而不会干扰它们宽度。 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，或额外的 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 - 兼容性最低，代码最短。