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

Question

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

要求是：

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

除了第三个要求之外，这很容易使用表，但我无法使用DIV和CSS来完成它。 我发现最接近的是“The Perfect 3 Column Liquid Layout (Percentage widths)”，但它有宽度百分比，这不符合我的需要。

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/

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（在我写这篇文章的时候）