如何通过超出此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>