1. 首页
  2. 问答
  3. 如何使用css创建像这样的列布局？

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

2016-12-03 51 views
0

我想在站点地图页面中显示我所有的部门，子部门，品牌如下图。我怎样才能做到这一点？如何使用css创建像这样的列布局？

我已经尝试使用css的column-count:3。但是它并没有显示所有三列中的内容。我想在最多3列中显示所有内容，并且内容是动态的。我怎样才能达到这种布局？

enter image description here

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

来源

2016-12-03 Sarath S Nair

+3

请提供html代码。 –

+0

@PawanLakhara HTML更新 –

+0

试试这个http://codepen.io/Cheesetoast/pen/KFAaq –

回答

0 

.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的同列布局，并允许包装应该工作。你只需要指定高度。

来源

2016-12-03 08:21:29

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>

来源

2016-12-03 09:54:33 LGSon

+0

但是，此解决方案无法按预期工作。在这里，每个子部门采取固定的高度（或者看起来像这样）。我想要填充空白空间。例如。 https://www.walmart.com/all-departments#electronics---office –

+0

@SarathSNair对于现有的标记，你将无法做到这一点，你必须将其分解为兄弟结构，然后使用'column -count'，因为'flexbox'不是为此做的。 – LGSon

+0

我没有得到你的意思是一个兄弟姐妹结构。如何将上述标记转换为兄弟格式？ –

相关问题

 相关问题