没有表格的 3 动态宽度列布局

Question

我试图实现以下布局，但没有成功：

要求是：

1. 所有三列，红色，绿色和蓝色必须具有动态宽度，即它们的宽度必须根据其内容而变化。
2. 灰色容器必须居中，其宽度也必须是动态的，具体取决于三列的内容。
3. 绿色列的 HTML 代码必须位于源代码中其他两列之前。

除了第三个要求之外，使用表格就像蛋糕一样简单，但我无法使用 DIV 和 CSS 来做到这一点。 我发现的最接近的是“完美的 3 列液体布局（百分比宽度）< /a>”，但它有百分比宽度，这不适合我的需要。

Answer 1

如今，使用 Flex-box 可以轻松实现这一点。
干得好。无需使用 width 或 height 属性即可满足您的所有 3 个要求。所有容器都会根据其内容进行调整。

body {text-align:center; font: 16px arial}
wrap {display: inline-flex;  flex-direction: column; background: lightgrey;}
header {margin-bottom: 10px; background: white; }
footer {margin-top: 10px; background: white}
content {display: flex; flex-direction: row-reverse}
ctnr {display: flex;}
centerCol {margin: 0 10px; background: green}
rightCol {background: blue}
leftCol {background: red}
[pad] {padding: 10px; border: 1px solid black;}

<wrap pad>
<header pad>Header</header>
<content>
<ctnr>
<centerCol pad><br><br><br>Center column<br><br><br><br><br><br><br></centerCol>
<rightCol pad>Right</rightCol>
</ctnr>
<ctnr>
<leftCol pad>Left</leftCol>
</ctnr>
</content>
<footer pad>Footer</footer>
</wrap>

Answer 2

我找到了如何将中心列放在代码中

http://jsfiddle.net/gamepreneur/bj6bU/< /a>

html

<div class="main">
    <div class="right-float">
        <div class="green">
            green
        </div>
        <div class="blue">
            blue
        </div>
    </div>
    <div class="red">
        red
    </div>
</div>

css

.right-float {
    float:right
}
.green {
    float:left;
}
.blue {
    float:right
}
.red {
    float:left;
}

我只是不知道如何做剩下的...而且现在是中午 12:40（在我写这篇文章的时候）