HTML、CSS、靈活布局

Question

我有一個動態渲染的 div 布局，我不知道 div 的數量，我試圖通過使用 CSS float屬性和display:flex;使布局靈活display:flex; 屬性，但我無法制作此布局，請任何人都知道根據下面的圖片制作此布局。 我還添加了代碼片段以更好地理解我的觀點。

 .wrapper{ display: flex; flex-wrap: wrap; } .wrapper > div{ padding: 10px; width: 33%; box-sizing:border-box; } .wrapper > div > div{ border:1px solid #cccccc; }

 <div class="wrapper"> <div> <div> <h4>Category 1</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> <div> <div> <h4>Category 2</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> <div> <div> <h4>Category 3</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> <div> <div> <h4>Category 4</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> <div> <div> <h4>Category 5</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> <div> <div> <h4>Category 6</h4> <ul> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> <li><a href="javascript:;">Subcategory</a></li> </ul> </div> </div> </div>

Answer 1

確保您已調整填充和邊距。 我會做這樣的事情：

div {
margin: 10px auto; /* upper and bottom have a margin of 10px, to create some horizontal whitespace in between divs */
padding: 0;
}