三、九宫格布局
<!-- 利用table实现 --> <style media="screen"> .parent{ display: table; table-layout: fixed; width: 100%; } .row { display: table-row; } .item{ display:table-cell; width: 33.3%; height: 200px; } </style> <body> <div class="parent"> <div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="row"> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class="row"> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div> </body>
<!-- 利用flex实现 --> <style media="screen"> .parent{display: flex;flex-direction: column;} .row{height: 100px;display: flex;} .item{width: 100px; background: red;} </style> <body> <div class="parent"> <div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class="row"> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class="row"> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div> </body>