html - 将 div 放在彼此下面，并在到达父级末尾时移动到下一列

Question

我正在尝试创建一个类别菜单...我想我可以用这张图片更好地解释我想要什么

所以我希望我的类别相互归类，直到它们到达菜单 div 的末尾，然后下一个类别转到下一个 col

我可以通过计算 menu div height 和 each category height 来做一些事情，比如 menu div height 是 200px 并且每个 category 高度是 50px

<div class="col-md-3">
@foreach($categories as $k=>$category ) 

{{$category->title}}

@if($k%4 == 0 )
</div><div class="col-md-3">
@endif


@endforeach
</div>

但我更喜欢更简洁/自然的方式，理想情况下是 css/html 解决方案

顺便说一句，col divs(col-md-3) 不是必需的...我只是想让类别以图片中描述的方式填充页面

我正在使用 bootstrap 4

Answer 1

If i understand right then you can simply do this with CSS.

检查我的代码。

.outer {
  background: #f2f2f2;
  padding: 10px;
  width: 500px;
  height: 100px;
  margin: auto;
  overflow: hidden;
}

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

li {
  list-style: none;
  padding: 2px 6px;
  background: #cacaca;
  margin: 3px;
  max-width: 50px;
  text-align: center;
}

<div class="outer">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
  </ul>
</div>