一个div盒子平均分为左右两个小div盒子
时间: 2024-03-11 10:49:25 浏览: 90
vue中实现拖动调整左右两侧div的宽度的示例代码
可以使用CSS的flex布局实现将一个div平均分为左右两个小div盒子。具体实现如下:
```html
<div class="parent-box">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
```
```css
.parent-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.left-box, .right-box {
flex: 1;
height: 100%;
}
```
上面的代码中,我们定义了一个父div,然后使用flex布局,并设置justify-content为space-between,这样就可以将左右两个小div平均分配到两端。然后设置左右两个小div的flex为1,这样就可以使它们平均分配剩余的空间。
注意,如果父div没有设置高度,则左右两个小div也需要设置高度为100%才能充满整个父div。
阅读全文