html - 在三格布局中自动调整左右 div 的大小？

Question

我有一个栏，其中有三个水平放置的 div(向左和向右浮动)。现在，我希望中间的 div 具有固定大小，而左右 div 会自动平均填充其余空间。

在粗略的 ASCII 中，它会是这样的:

-------------------------------------------
|      LEFT       | MID |      RIGHT      |
-------------------------------------------
    AUTO-WIDTH     80px      AUTO-WIDTH

我如何在 CSS 中做到这一点？

Answer 1

你可以用 FLEX 模型来做

它非常易于使用，而且非常有用。

<div class="container">
    <div class="grid1">
        Text
    </div>
    <div class="grid2">
        Text<br />
        lorem ipsum dolor sit<br />
        text text
    </div>
    <div class="grid1">
        Text
    </div>
</div>

.container { display: flex; }
.container .grid1 { background-color: yellow; flex: 1; }
.container .grid2 { background-color: lime; width: 80px; }

演示:http://jsfiddle.net/SchweizerSchoggi/s8pzayep/19/

更新