cssを使用してこのような列レイアウトを作成するにはどうすればよいですか？

Question

以下のような私の部署、サブ部門、ブランドをすべてサイトマップページに表示したいと考えています。どうすればこれを達成できますか？

私はすでにcolumn-count:3とcssを使って試しました。しかし、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

.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コメントに基づいて

.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>

---

最良の方法であなたのコンテンツをレイアウトする方法のあなたがコントロールするようになると考えている。この場合

Answer 2

は、ここではどのようにしてありますすることができます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>