如何使用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應該可以工作。 您只需指定高度。