首页三行两列：将页面分成三行，将任一行分为两列的页面怎么制作

三行两列：将页面分成三行，将任一行分为两列的页面怎么制作

时间: 2024-09-15 22:13:15 浏览: 46

要实现一个三行两列的页面布局，可以使用CSS Grid或Flexbox。这里以CSS Grid为例演示： **CSS Grid示例**: ```html <!DOCTYPE html> <html lang="zh"> <head> <style> body { display: grid; grid-template-columns: repeat(2, 1fr); /* 两列，每一列占1份 */ grid-template-rows: repeat(3, minmax(auto, 1fr)); /* 三行，每行高度自适应 */ gap: 10px; /* 列间隔 */ } .grid-item { background-color: #f5f5f5; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div class="grid-item">第一列第一行</div> <div class="grid-item">第二列第一行</div> <div class="grid-item">第一列第二行</div> <div class="grid-item">第二列第二行</div> <div class="grid-item">第一列第三行</div> <div class="grid-item">第二列第三行</div> </body> </html> ``` 在这个例子中，`.grid-item` 类的元素会被自动分配到三行两列的网格里。

阅读全文