CSS列布局（flexbox、float、列）

我正在努力实现以下布局，如屏幕截图所示：

这是页面中过滤器部分的一部分，在单击触发该过滤器的按钮后打开

困扰我的是栏目布局

目前的加价情况如下：

<div class="dropdown-wrapper open">
  <div class="dropdown-inner-wrap open">
    <div class="bs-searchbox"></div>

    <div class="inner open" role="listbox" style="max-height: 320px; overflow-y: auto;">
      <ul id="klfilter_location" class="dropdown-menu inner">
        <li class="dropdown-header optgroup optgroup-1">
          <legend role="option" class="opt">
            <label for="region-north">
              <span class="text">
                <span class="main-data-region">North</span>
              </span>
              <input type="checkbox" hidden="" class="hidden" id="region-north" value="north">
            </label>
          </legend>
          <ul class="grouped-options group-1">
            <li class="optgroup-north">
              <a role="option" class="opt">
                <label for="8">
                  <span class="check-mark"></span>
                  <span class="text">
                    <span class="main-data">Option A1
                      <span class="count">(1)</span>
                    </span>
                  </span>
                  <input type="checkbox" hidden="" class="hidden" id="8" name="Location[]" value="8">
                </label>
              </a>
            </li>
            <li class="optgroup-north">
              <a role="option" class="opt">
                <label for="9">
                  <span class="check-mark"></span>
                  <span class="text">
                    <span class="main-data">Option A2
                      <span class="count">(6)</span>
                    </span>
                  </span>
                  <input type="checkbox" class="hidden" id="9" name="Location[]" value="9">
                </label>
              </a>
            </li>
          </ul>
        </li>
        <li class="dropdown-header optgroup optgroup-2">
          <legend role="option" class="opt">
            <label for="region-west">
              <span class="text">
                <span class="main-data-region">West</span>
              </span>
              <input type="checkbox" class="hidden" id="region-west" value="west">
            </label>
          </legend>
          
          <ul class="grouped-options group-2">
            <li class="optgroup-west">
              <a role="option" class="opt">
                <label for="10">
                  <span class="check-mark"></span>
                  <span class="text">
                    <span class="main-data">Option B1
                      <span class="count">(1)</span>
                    </span>
                  </span>
                  <input type="checkbox" class="hidden" id="10" name="Location[]" value="10">
                </label>
              </a>
            </li>
            <li class="optgroup-west">
              <a role="option" class="opt">
                <label for="11">
                  <span class="check-mark"></span>
                  <span class="text">
                    <span class="main-data">Option B2
                      <span class="count">(6)</span>
                    </span>
                  </span>
                  <input type="checkbox" class="hidden" id="11" name="Location[]" value="11">
                </label>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>


    <div class="grid-item klfilter-btn-toolbar">
      <button>Clear</button>
      <button>Go</button>
    </div>

  </div>
</div>

北



如果我使用
flex-direction:column
，我需要为flex容器指定一些高度。但是我可能会得到更多的列，超过可用的宽度，并有水平滚动


我尝试使用CSS列：
我尝试了许多组合，有各种各样的问题，现在很难准确地记住和描述。然而，一个大问题是，我不能“保持”团队
ul
s-或者在顶部创建一个对齐，让团队从那里开始


*现在看起来还不错

我试过使用float

问题是，由于每组的高度不确定，浮动元件可能会在任何地方移动/卡住，整个布局都会很混乱

我尝试了css网格

我对网格的经验要少得多，所以我不确定我是否尝试了所有可能的方法，但我还是设法创建了一个3x3的网格布局，当一组ul太高时，我在两行之间获得了很大的空间

关于如何实现这一点，有什么想法和建议吗

理想情况下，元素应该能够像这里一样对齐（类似于第一张图像-但在较长的左侧组中显示得更好）：

您可以使用
列计数
，删除容器的最小高度，并使用
内部分页符：avoid在他们身上


.internal.open{
列数：3；
}
.optgroup{
内部分页符：避免；
}
#KLU位置{
边际上限：0；
}

嗨，约翰。。。我正要给专栏另一个机会，因为在我刚刚创建的代码笔（）中，它似乎可以工作。事实上，在使用浏览器检查器时-我能够在我的项目中使用css列实现它-但是，每次我在样式表中添加所需的css并刷新页面时，它都无法100%正常工作。。。我将尝试你的解决方案，并将返回结果。我到达了某个我保持容器高度的地方（无论如何都是需要的）-我相信我以前也尝试过同样的方法。。。提供最终解决方案相当复杂。。。但总的来说，它接近于带有css列的代码笔。谢谢你的帮助，非常感谢。