以三格式布局自动调整左侧和右侧div的大小？

Question

我有一个水平放置三个div的栏（左右浮动）。现在，我希望中间的一个具有固定的大小，而左右的div将自动平均填充剩余的空间。

在原始ASCII中，它是这样的：

content

我如何在CSS中执行此操作？

Answer 1

您可以使用FLEX-model

执行此操作

它很容易使用，就像魅力一样。

<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/

已更新

Answer 2

以下是你想要的。使用display:table和display:table-cell。

.container {
    display: table;
    text-align: center;
    width: 100%;
    background-color: yellow;
}

div{
    border:1px solid;
}

.left {
    display: table-cell;
}

.middle {
    display: table-cell;
    width: 150px;
}

.right {
    display: table-cell;
}

<div class="container">
    <div class="left">
        Text
    </div>
    <div class="middle">
        Fixed width
    </div>
    <div class="right">
        Text
    </div>
</div>

检查Fiddle Here.