html - 使用 CSS 和 div 的灵活最后一列

Question

在一个新站点上工作，并构建我们的主页内容以使用 CSS 动态列。这是页面示例:

<div class="maincols">
    <div class="maincol">Here's a column</div>
    <div class="maincol">Here's another column</div>
    <div class="maincol">This is my last column</div>
</div>

这是相关的 CSS:

.maincol, .maincols { min-height: 1px; padding: 0; position: relative; }
.maincol { float: left; width: 25%; border-width: 1px; border-style: solid; border-color: #f00; padding: 0; }
.maincol:nth-child(4n) { margin-right: 0; }
.maincol:nth-child(4n+1) { clear: left; }
.maincol:last-child { float: right; text-align: center; }

所以我们得到每行 4 列(有效)，并将下一批推到新行(也有效)。现在，如何让最后一列占据该行的全部剩余空间？

目前看起来像这样:

| col1 | col2 | col3 | col4 |
| col5 |             | col6 |

我需要它看起来像这样:

| col1 | col2 | col3 | col4 |
| col5 |        col6        |

或者像这样(如果我添加另一批内容):

| col1 | col2 | col3 | col4 |
| col5 | col6 |    col7     |

建议？

Answer 1

Flexbox 可以做到这一点

* {
  box-sizing: border-box;
}
.maincols {
  display: flex;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.maincol {
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid blue;
}
.maincol:last-child {
  flex: 1;
}

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's my last column</div>

</div>