具有动态宽度的列

Question

我需要一个带有两个cols的握柄，左侧col需要最小宽度为300px，右侧col应使用剩余宽度，类似于css-calc。这是可能的还是我应该编写自定义CSS。

calc(100% - 300px)

HTML

 <div class="col-2"></div>
 <div class="col-10"></div>

Answer 1

这也可以通过flexbox实现，如下所示：

＆＃13;

＆＃13;

.parent {
  display: flex;
}

.child {
  height: 30px;
}

.col-2 {
  flex: 2;
  min-width: 300px;
}

.col-10 {
  flex: 10;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}

＆＃13;

<div class="parent">
  <div class="child col-2 bg-blue"></div>
  <div class="child col-10 bg-green"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

代码段也可在this codepen中找到。

详细了解Flexbox from here。

另请阅读flexbox的CanIUse page。