html - 4 列 - 固定流体-流体-流体

Question

我想用 <div> 制作 4 列元素:

• 第1列的宽度需要固定为200px。

• 其他 3 列需要动态划分它们之间的剩余宽度。

<div class="column">Column 1 Fixed 200px</div>
<div class="column">Column 2 Fluid</div>
<div class="column">Column 3 Fluid</div>
<div class="column">Column 4 Fluid</div>

我怎样才能做到这一点？

Answer 1

你可以使用calc:

.column:nth-child(1) {
    width: 200px;
}

.column:nth-child(n + 2) {
    width: calc((100% - 200px) / 3);
}

这是一个 JSFiddle