HTML、CSS、フレキシブルレイアウト

Question

ダイナミックレンダリングされたdivレイアウトがあり、divの数がわからない、CSS floatプロパティとdisplay:flex;プロパティを使用してレイアウトをフレキシブルにしようとしましたが、作成に失敗しましたこのレイアウトは、以下の添付画像に基づいてこのレイアウトを作成することをお勧めします。私は私のポイントをより良く理解するためにコードスニペットを追加しました。

.wrapper{ 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.wrapper > div{ 
 
\t padding: 10px; 
 
\t width: 33%; 
 
    box-sizing:border-box; 
 

 
} 
 
.wrapper > div > div{ 
 
\t 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; 
}