如何使用CSS创建像这样的列布局？

Question

我想在站点地图页面中显示我所有的部门，子部门，品牌，如下所示。 我该如何实现？

我已经尝试过使用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所有部门页面的 要求相同 。

Answer 1

在这种情况下，我相信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> 

Answer 2

 .sitemap-dept-panel { width: 100%; font-family: Arial; } .sitemap-dept-title { color: blue; font-size: 1.3em; } .sitemap-sub-dept-panel { max-height: 400px; padding: 1em; display: flex; flex-direction: column; flex-wrap: wrap; } .sitemap-sub-dept-title { font-size: 1.2em; } ul { 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>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> <li>Lava</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> 

具有列布局和允许包装的Flexbox应该可以工作。 您只需指定高度。