怎么让六个div水平排列
时间: 2024-02-01 10:13:13 浏览: 68
让多个div在同一行显示的样式及html代码
可以使用 CSS 的 `display: flex` 属性来实现六个 div 水平排列。具体操作如下:
HTML 代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS 代码:
```
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin-right: 10px;
}
```
其中,`.container` 为父容器,使用 `display: flex` 属性来开启弹性布局;`.box` 为子容器,设置宽高和背景颜色,使用 `margin-right` 属性来设置子容器之间的间距。这样,就可以实现六个 div 水平排列的效果了。
阅读全文