如何并排3个div，最右边的一个占用剩余的宽度？

Question

我有一个布局，我有一个小条（不是导航栏），然后在它下面，我有3个div左浮。如何让最右边的一个占据页面宽度的其余部分？

Answer 1

在父级上使用'x' is [[1,2,3], [4,5,6]] tf.reduce_sum(x, axis=1) is [6, 15] tf.reduce_sum(x, axis=1, keep_dims=True) is [[6], [15]] 而不是浮动子级，然后设置要占用剩余空间的子级flex

flex-grow: 1

.flex {
  display: flex;
}
.pancakes {
  flex-grow: 1;
  background: #eee;
}

Answer 2

Flexbox是最佳选择。不要忘记将autoprefixer与您使用的任何构建工具一起使用，或者手动添加供应商前缀。

标记

<section class="things">
  <ul class="thing-list">
    <li class="thing">thing one</li>
    <li class="thing">thing two</li>
    <li class="thing">thing three</li>
  </ul>
</section>

样式

.things {
  border: 1px solid red
}

.thing-list {
  list-style: none;
  margin: 0;
  padding: .5rem;

  display: flex;
  flex-direction: row;
}

.thing-list .thing {
  border: 1px solid blue;
  padding: .5rem;
  text-align: center;
}

.thing-list .thing:last-of-type {
  flex-grow: 1;
}

我还建议你下次建立一个jsFiddle。尽可能简单地显示方案：https://jsfiddle.net/sheriffderek/26btxypb/

Gnar

.thing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.thing-list .thing:last-of-type {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}