使用flexbox

Question

我想使用<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>

我怎样才能做到这一点？

Answer 1

您可以使用calc：

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

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

这是JSFiddle

Answer 2

建立@ bowheart的答案 - 您可以更多地简化CSS：

.column {width: calc((100% - 200px) / 3)}
.column:first-child{width: 200px}

通过这种方式，您可以定位所有这些内容，然后隔离第一个。

Answer 3

使用flexbox

兼容性 IE11 + and all modern browsers. Safari需要-webkit-前缀。

Screenshot

如果缺少旧版浏览器支持不是问题，可以非常简单地实现这种布局：

主体（或div包装器）的高度为display: flex（您可以指定希望列具有的任何高度）。
3个灵活的div被赋予flex: 1并且会均匀地增长和缩小。
1个固定div被赋予flex: 0 0 200px它不会增长或缩小，并将保持默认的200px宽。

Easy guide to Flexbox over on CSS Tricks.

完整示例

没有包装

视口的整个高度在width: 100vh上填充<body>。

＆＃13;

body {
  display: flex;
  height: 100vh;
  margin: 0;
}
body > div {
  flex: 1;
  background: #F00;
}
body > div:first-child {
  flex: 0 0 200px;
}
body > div:nth-child(2n) {
  background: #F90;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

使用div包装器

包装纸的高度较小，最小/最大宽度合适。

＆＃13;

body {
  margin: 0;
}
.wrapper {
  display: flex;
  height: 50vh;
  margin: 0;
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
}
.wrapper > div {
  flex: 1;
  background: #F00;
}
.wrapper > div:first-child {
  flex: 0 0 200px;
}
.wrapper > div:nth-child(2n) {
  background: #F90;
}

＆＃13;

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

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

3 个答案:

使用flexbox

完整示例

没有包装

使用div包装器