flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: flex; flex-wrap: wrap; justify-content: space-around; } .item { width: calc(calc(100% / 3) - 10px); border: 1px solid blue; height: 30px; line-height: 30px; color: red; margin-bottom: 10px; } .item:nth-child(n+4) { margin-bottom: 0; } </style> </head> <body> <div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .container { display: flex; flex-wrap: wrap; border: 1px solid red; } .item { flex-basis: 33.33%; border: 1px solid blue; box-sizing: border-box; text-align: left; } */ .container { display: flex; flex-wrap: wrap; justify-content: flex-start; border: 1px solid red; } .item { flex-basis: calc(33.33% - 10px); margin-right: 15px; margin-bottom: 15px; box-sizing: border-box; text-align: left; border: 1px solid blue; } .item:nth-child(3n) { margin-right: 0; } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </body> </html>