html页面布局三行两列
时间: 2023-11-12 10:59:06 浏览: 126
html网页布局
4星 · 用户满意度95%
可以使用flex布局实现三行两列的页面布局,具体实现方式如下:
HTML代码:
```
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
width: 100%;
}
.col {
flex: 1;
height: 100px;
border: 1px solid #ccc;
}
```
阅读全文