css - 没有 float 的网格列

Question

我试图在一行中放置七列相同大小的列:

.seven-cols .col-hard-1 {
  width: 14.28%;
  *width: 14.28%;
  float: left;
}

但是，float:left 搞砸了页面上的所有下一个 block 。有没有办法在不使用 float 的情况下制作这个网格？

Codepen

Answer 1

在容器上使用 display: flex;，在元素上使用 flex-grow: 1; 和 flex-basis: 0;使它们都占用相同数量的可用空间。

.seven-cols {
  display: flex;
}
.seven-cols .col-hard-1 {
  flex-grow: 1;
  flex-basis: 0;
}

<div class="seven-cols">
  <div class="col-hard-1">
    one
  </div>

  <div class="col-hard-1">
    two
  </div>

  <div class="col-hard-1">
    three
  </div>

  <div class="col-hard-1">
    four
  </div>

  <div class="col-hard-1">
    five
  </div>
  <div class="col-hard-1">
    six
  </div>
  <div class="col-hard-1">
    seven
  </div>
</div>