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 all department page。

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应该可以工作。您只需指定高度。

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

2 个答案: