用css编写一段包含三列布局,且每一列中包含三个长方形的代码
时间: 2024-05-01 18:17:32 浏览: 10
当然,我可以为您提供CSS代码进行实现。
首先,HTML代码应该是这样的:
```html
<div class="container">
<div class="column">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
```
然后,CSS样式应该是这样的:
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.column {
width: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.box {
width: 90%;
height: 50px;
margin: 5% 0;
background-color: #aaa;
}
```
这样就可以实现一个包含三列布局,每一列中包含三个长方形的效果了。