用html\css写一个两行,每行三个盒子
时间: 2024-03-23 14:39:18 浏览: 111
css3 + js实现3D盒子,可用滚轮及拖拽调整视角3Dbox.html
好的,下面是一个示例的HTML和CSS代码,可以实现你要求的两行,每行三个盒子的效果。
HTML代码:
```html
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```css
.row {
display: flex;
justify-content: center;
margin: 20px 0;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0 10px;
}
```
解释一下代码:
- 首先,我们使用`<div>`元素创建两个容器,分别用于放置每一行的盒子。
- 对于每一行的盒子,我们使用`display: flex`来指定它们水平排列,并使用`justify-content: center`来让它们水平居中对齐。
- 每个盒子的大小为`100px * 100px`,背景颜色为灰色,左右间距为`10px`。
阅读全文