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

我已经尝试过使用CSS使用column-count:3。但是它没有在所有三列中显示内容。我想在最多3列中显示所有内容,并且这些内容是动态的。如何实现这种布局?

html - 如何使用CSS创建像这样的列布局?-LMLPHP

这是我的
的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>

10-07 19:14
查看更多