html页面布局五行两列
时间: 2023-11-12 17:59:06 浏览: 185
可以使用CSS的flexbox布局来实现五行两列的页面布局。具体实现方法如下:
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 class="col">6</div>
</div>
<div class="row">
<div class="col">7</div>
<div class="col">8</div>
</div>
<div class="row">
<div class="col">9</div>
<div class="col">10</div>
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.row {
display: flex;
width: 100%;
}
.col {
flex: 1;
height: 100px;
margin: 10px;
background-color: #ccc;
}
```
阅读全文