HTML中如何实现类似WinForm的多列列表？

Question

我想在 HTML 中实现如下效果：想要的效果像这样：

1        6        11
2        7        12
3        8        13
4        9        14
5        10       15

元素的高度可能会有所不同，如果第一列不能显示所有元素，我希望在第二列中显示额外的元素，依此类推。 （如果超过宽度则水平滚动）元素的数量及其内容不固定。

我在网上没有找到任何相关的东西。 希望能解决，谢谢。

Answer 1

只需将column-count -property 用于包装父元素：

 .container { column-count: 3; }

 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div>

Answer 2

根据我的评论并完成@tacoshy 的回答：

column-width + height 将允许水平溢出https://jsfiddle.net/0um5ra2w/ -|- https://developer.mozilla.org/en-US/docs/Web/CSS/columns 。 column-count 只会绘制固定数量的列:)

 ul{ column-width:200px; height:5em; overflow:auto; /*demo purpose*/ counter-reset:spans; } li:before{ counter-increment:spans; content:counter(spans); }

 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Answer 3

你可以在这里找到一些东西： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

.box {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.box>* {
    flex: 1 1 80px;
}

对于 HTML 之类的

   <div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
  </div>