没有浮动的网格列

Question

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

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

然而，float:left搞砸了页面上的所有下一个块。有没有办法在不使用float的情况下制作此网格？

Codepen

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;