javascript - 如何创建 4 列的布局，其中一列具有动态宽度，其他 3 列是偶数？

Question

我不确定解决这个问题的最佳方法是什么。我需要 4 列的布局，第一列的(动态)宽度未知，其他 3 列应均匀填充剩余空间。棘手的部分是所有列必须是彼此的直接兄弟。

最好是纯CSS解决方案

Answer 1

Flexbox 可以做到这一点...

.parent {
  display: flex;
  margin-bottom: 1em;
}
.big {
  height: 100px;
  border: 1px solid grey;
  background: lightblue;
  flex: 1 0 auto;
}
p {
  white-space: nowrap;
  ;
}
.box {
  flex: 0 1 33%;
  border: 1px solid grey;
}

<div class="parent">
  <div class="big">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="parent">
  <div class="big">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>