html - 使用带有内联 block 的列宽的最少两行

Question

我试图将行内 block 分成几列，从每列中的一个元素开始。相反，它最初在一列中给了我两个 block 。我可以做些什么来改变这种行为？

http://jsfiddle.net/fuqrwe64/10/

<style>
.container {
  background: #f99;
  column-width: 130px;
}

.item {
  background: #9f9;
  width: 130px;
  height: 40px;
  margin: 5px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-family: monospace;
}
</style>

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">F</div>
</div>

Answer 1

使用 column-count CSS 属性

.item{
column-count:3;
}

如果你想设置宽度，你可以使用column-gap属性来设置它