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

用户名

我想用<div>元素创建4列

  • 第一列的宽度需要固定为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>

我怎样才能做到这一点?

弓心

您可以使用calc

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

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

这是一个JSFiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

CSS-4列(固定流体固定)

来自分类Dev

创建3列布局的方法:流体-固定-流体

来自分类Dev

流体布局,左固定,右流体

来自分类Dev

3列布局(固定,流体,固定),最小宽度

来自分类Dev

如何创建3列布局(固定,固定,流体)

来自分类Dev

流体容器内的流体图像

来自分类Dev

3列CSS,中间尺寸固定,左右流体

来自分类常见问题

Bootstrap 3.0-包含固定列大小的流体网格

来自分类Dev

具有固定列宽的流体Flexbox网格

来自分类Dev

3列CSS,中间尺寸固定,左右流体

来自分类Dev

表单中的标签/输入固定流体布局

来自分类Dev

固定元件与流体元件的组合-台式

来自分类Dev

在垂直布局中结合固定和流体

来自分类Dev

以流体背景为中心的固定内容

来自分类Dev

固定DIV在5个流体DIV旁边

来自分类Dev

表单中的标签/输入固定流体布局

来自分类Dev

固定宽度的文字+水平的流体框

来自分类Dev

灵活的布局流体和固定宽度

来自分类Dev

流体,静态,流体-3行布局

来自分类Dev

无法在流体Div中使流体图像居中

来自分类Dev

改变纵横比的流体容器内的流体图像

来自分类Dev

两列流体布局,左列是临时的

来自分类Dev

CSS:2列全屏流体布局

来自分类Dev

隐藏流体引导程序布局中的列

来自分类Dev

flexbox中的流体高度列?

来自分类Dev

3列布局,中间有流体输入

来自分类Dev

砌体:流体div中的相同列宽

来自分类Dev

flexbox中的流体高度列?