第一種 flex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex</title> </head> <body> <p>小方塊20*15</p> <p>間距都是10</p> <style> *{margin:0;padding:0;list-style: none;font-size: 12px;} </style> <style> .parent{ justify-content: space-evenly; box-sizing: border-box; width:130px;/* 5個空隙*10+4個方塊*20 */ display: flex; flex-wrap: wrap;/*換行*/ padding-left:10px; padding-top:10px; background: green; } .child{ box-sizing: border-box; width:20px; height:15px; border:1px solid; flex:none;/*不放大不縮小*/ margin-right: 10px; margin-bottom: 10px; } </style> <ul class="parent"> <li class="child">1</li> <li class="child">2</li> <li class="child">3</li> <li class="child">4</li> <li class="child">5</li> <li class="child">6</li> <li class="child">7</li> <li class="child">8</li> <li class="child">9</li> <li class="child">10</li> <li class="child">11</li> <li class="child">12</li> <li class="child">13</li> </ul> </body> </html>
第二種 使用浮動
<body> <p>小方塊20*15</p> <p>間距都是10</p> <style> *{margin:0;padding:0;list-style: none;font-size: 12px;} </style> <style> .parent{ width:130px; box-sizing: border-box; padding:10px; padding-left:0; background: green; } .parent::after{ content: ""; display: block; height: 0; clear: both; } .child{ float:left; box-sizing: border-box; width:20px; height:15px; border:1px solid; margin-left: 10px; margin-bottom: 10px; } </style> <ul class="parent"> <li class="child">1</li> <li class="child">2</li> <li class="child">3</li> <li class="child">4</li> <li class="child">5</li> <li class="child">6</li> <li class="child">7</li> <li class="child">8</li> <li class="child">9</li> <li class="child">10</li> <li class="child">11</li> <li class="child">12</li> <li class="child">13</li> </ul> </body>
