html三行两列盒子模型代码
时间: 2024-06-01 22:07:06 浏览: 111
HTML三行两列盒子模型代码通常使用CSS的flex布局实现,示例代码如下:
```
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
<div class="row">
<div class="column">Column 5</div>
<div class="column">Column 6</div>
</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.row {
flex: 1;
display: flex;
}
.column {
flex: 1;
padding: 10px;
border: 1px solid black;
}
</style>
```
上面的代码中,`.container`是包含所有盒子的父容器,使用`display: flex`实现flex布局,并设置`flex-wrap: wrap`使得当子元素超出容器宽度时可以自动换行。`.row`是每一行的容器,也使用`display: flex`实现flex布局。`.column`是每一个盒子,使用`flex: 1`使得每个盒子占据相同的空间,并设置`padding`和`border`来美化盒子的样式。
阅读全文