CSS实现12个盒子6个横向排列2个纵向排且高度一致并居中
时间: 2024-10-11 16:06:29 浏览: 17
要使用CSS实现12个盒子,其中6个横向排列,2个纵向排列,并保持所有盒子的高度一致并垂直居中,可以使用Flexbox布局结合Grid布局。首先,创建一个包含所有盒子的容器,然后设置容器的display属性为flex (为了水平方向的布局) 和 grid (为了网格方向的布局)。
HTML结构示例:
```html
<div class="container">
<div class="row row1">...</div>
<div class="row row2">...</div>
<!-- ... -->
<div class="row row3">...</div>
</div>
```
CSS样式示例:
```css
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 水平方向均匀分布 */
align-items: center; /* 垂直方向居中 */
height: /* 设置一个固定高度,确保所有盒子高度一致 */;
}
.row {
display: flex;
}
.row1, .row2 { /* 根据需要调整列数 */
flex-basis: calc(50% - (calc(50% - 100px) / 2)); /* 计算每列占据50%,减去间距 */
margin-bottom: 10px; /* 可选,添加间距 */
}
/* 如果需要,你可以为纵向排列的列单独设置样式,例如: */
.row2 {
flex-direction: column;
}
```
在这个例子中,`.row1`和`.row2`代表横向和纵向排列的行,通过调整 `.row1` 的 `flex-basis` 来控制它们所占宽度。注意,你需要替换 `100px` 为你想要的实际盒子尺寸,`height` 属性也需要设置实际高度值以保证一致性。
阅读全文