一个div大盒子里 平均分为左中右三份大小一样的div盒子
时间: 2024-03-12 15:46:10 浏览: 100
div三栏布局左中右通过float浮动来设置
可以使用flex布局来实现这个要求。首先需要设置大盒子的display为flex,然后设置justify-content为space-between,这样左、中、右三个盒子就会平均分布在大盒子内。具体代码如下:
```html
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
```
```css
.container {
display: flex;
justify-content: space-between;
}
.left, .middle, .right {
width: calc(33.33% - 10px);
height: 100px;
background-color: #ccc;
}
```
注意,这里设置了三个盒子的宽度为33.33%,减去10px的原因是因为三个盒子之间还需要留出一定的间隙。
阅读全文