如何解决CSS列布局flexbox,float,columns
我正在努力实现以下屏幕截图所示的布局:
这是页面中过滤器部分的一部分,在单击触发该过滤器的按钮后会打开该页面。
困扰我的部分是列的布局。
当前标记如下:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。