问题描述
我正在努力实现以下屏幕截图所示的布局：
这是页面中过滤器部分的一部分，在单击触发该过滤器的按钮后会打开该页面。
困扰我的部分是列的布局。
当前标记如下：
<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>
注意：
最初，我尝试使用flexBox。
在flex-direction: row中设置时，如果ul组太高，则其他组之间会有很大的垂直空间。
如果我使用flex-direction: column，则需要为flex容器指定一些高度。但是后来我可能会得到更多的列，超出可用宽度并进行水平滚动。
我尝试过使用CSS列：
我尝试了许多组合，遇到了各种各样的问题，这些问题现在很难记住和描述。不过，一个大问题是，我无法“保持在一起” ul组-或在顶部创建对齐方式并使组从此处开始。
Codepen CSS Columns *实际上现在看起来还可以
我尝试了float
好吧，问题在于每个组的高度不确定，浮动元素可能会在任何地方移动/卡住，并且整个布局将变得混乱。
我尝试过使用CSS网格
我在网格方面的经验要少得多-所以我不确定我是否尝试了所有可能的方法，但是我仍然设法创建了3x3网格布局-并且当ul组过高时，行之间的空间很大。 / p>
任何想法-有关如何实现此目标的建议？
理想情况下，元素应该能够像这里一样对齐（类似于第一个图像-但在较长的左组中显示更好）：
解决方法
您可以使用column-count，删除容器的最小高度，为避免子组内的列中断，请在其上使用page-break-inside: avoid;。
.inner.open {
column-count: 3;
}
.optgroup {
page-break-inside: avoid;
}
#klfilter_location {
margin-top: 0;
}<div class="dropdown-wrapper open">
<div class="dropdown-inner-wrap open">
<div class="bs-searchbox"></div>
<div class="inner open" role="listbox" 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>
<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>
<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>
<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-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>
<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>
<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>
<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>
<div class="grid-item klfilter-btn-toolbar ">
<button>Clear</button>
<button>Go</button>
</div>
</div>
</div>