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

Question

我们如何创建一个3列布局，流体固定流体，如下图所示。有不止一个选择吗？如果是的话，每种方法的利弊是什么？

备注：如果它们与我已经发布的三个不同，可以随意添加更多答案。而且，我知道以前有人问过这个问题，但我在任何地方都找不到最新的三个答案。

​

​

Answer 1

方法4- Flex模型

类似于AndyM文章中的方法3，该方法依赖于CSS3，并且只在现代浏览器中工作。然而，正如它的名称所示，它是灵活的，易于实现。我们使用三个新的CSS属性：display:flex;、flex-grow:;和flex-basis:;。

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

Pros：CSS既简洁又短，以后很容易更改。与方法2& 3不同，固定宽度只需要声明一次。

Cons：浏览器兼容性。这只是比calc()稍微好一点，但没有太多的兼容性。我们现在可以使用它，但是我们基本上，除了大多数移动浏览器和Internet的最新版本之外，其他所有版本都会丢失。。

工频

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中的示例，以便更容易地比较这些方法。对于最初的帖子，我从未听说过这种方法。- AndyM

原版Fiddle