如何通过超过此div的高度使div的内容转到下一列

Question

如果我没有很好地提出这个问题，我很抱歉，我希望让自己明白。基本上我有一个元素列表，这些元素分布在每一行。我希望当这一行超过div的总大小时，列表将继续在前面的可用空间中。

<div>
  <ul>
    <li>
      1  
    </li>
    <li>
      2  
    </li>
    <li>
      3  
    </li>
    <li>
      4  
    </li>
    <li>
      5  
    </li>
    <li>
      6
    </li>      
  </ul>
</div>

div
{ 
 border: 1px solid red;
 height: 100px;
 width:300px;
}

我该怎么做？

https://jsfiddle.net/ug0f38b1/

Answer 1

我正在使用flexbox来解决这个问题，方向设置为column。您需要ul的高度来填充父容器，以便它知道何时中断。

随着列表的增长，这些项目自然分布。

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
}

<div>
  <ul>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      5
    </li>
    <li>
      6
    </li>
  </ul>
</div>

jsFiddle

调整列间距

使用flexbox的一个好处是我们可以将ul设置为inline-flex，这样可以轻松控制列间距。

jsFiddle

Answer 2

可以使用columns和column-fill的组合。请查看以下示例。

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
  padding: 1rem;
}

ul {
  margin: 0;
  height: 100%;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

<div>
      <ul>
        <li>
          1  
        </li>
        <li>
          2  
        </li>
        <li>
          3  
        </li>
        <li>
          4  
        </li>
        <li>
          5  
        </li>
        <li>
          6
        </li> 
        <li>
          7  
        </li>
        <li>
          8
        </li> 
      </ul>
    </div>