我想在站点地图页面中显示我所有的部门,子部门,品牌,如下所示。我该如何实现?
我已经尝试过使用CSS使用column-count:3
。但是它没有在所有三列中显示内容。我想在最多3列中显示所有内容,并且这些内容是动态的。如何实现这种布局?
这是我的
的HTML
<div class="sitemap-dept-panel">
<div class="sitemap-dept-title"><span class="sitemap-dept-name">Electronics</span></div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</div>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</div>
</div>
</div>
</div>
我发现这与我的要求Walmart.com all department page几乎相同。
最佳答案
在这种情况下,我相信flexbox
将让您控制如何以最佳方式布置内容
.sitemap-sub-dept-panel {
display: flex;
flex-wrap: wrap;
}
.sitemap-sub-dept {
width: 33%;
border: 1px solid #ddd;
}
.sitemap-brands-list-panel {
list-style-type: none;
}
<div class="sitemap-dept-panel">
<div class="sitemap-dept-title"><span class="sitemap-dept-name">Electronics</span></div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Mobile</div>
<ul class="sitemap-brands-list-panel">
<li>Samsung</li>
<li>Apple</li>
<li>Motorola</li>
<li>Lava</li>
</ul>
</div>
<div class="sitemap-sub-dept">
<div class="sitemap-sub-dept-title">Accessories</div>
<ul class="sitemap-brands-list-panel">
<li>Case</li>
<li>Screen Guard</li>
<li>Headphones</li>
<li>Cables</li>
<li>Powerbanks</li>
<li>Charger</li>
</ul>
</div>
</div>
</div>
根据评论,这是使用
column-count
的方法.sitemap-dept-name {
color: blue;
font-size: 24px;
}
.sitemap-sub-dept-panel {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.sitemap-sub-dept-title {
text-decoration: underline;
font-size: 20px
}
.sitemap-brands-item {
font-size: 16px;
padding: 2px 0 2px 12px ;
}
<div class="sitemap-dept-panel">
<div class="sitemap-dept-title">
<span class="sitemap-dept-name">Electronics</span>
</div>
<div class="sitemap-sub-dept-panel">
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
<div class="sitemap-sub-dept-title">Mobile</div>
<div class="sitemap-brands-item">Samsung</div>
<div class="sitemap-brands-item">Apple</div>
<div class="sitemap-brands-item">Motorola</div>
<div class="sitemap-brands-item">Lava</div>
<div class="sitemap-sub-dept-title">Accessories</div>
<div class="sitemap-brands-item">Case</div>
<div class="sitemap-brands-item">Screen Guard</div>
<div class="sitemap-brands-item">Headphones</div>
<div class="sitemap-brands-item">Cables</div>
<div class="sitemap-brands-item">Powerbanks</div>
<div class="sitemap-brands-item">Charger</div>
</div>
</div>