除了flex,具体怎么把div中横向平均分成两块
时间: 2024-05-02 16:20:14 浏览: 83
vue flex 布局实现div均分自动换行的示例代码
可以使用display: inline-block和width: 50%来实现将一个div水平平均分成两个块。
示例代码如下:
HTML:
```
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
```
CSS:
```
.container {
text-align: center;
}
.box1, .box2 {
display: inline-block;
width: 50%;
height: 100px;
background-color: #ccc;
}
```
在上述示例中,我们首先将父级元素设置为text-align: center,以便将子元素水平居中。然后我们使用display: inline-block和width: 50%来将两个子元素平均分成两个块。
同时,我们为子元素设置了一个固定的高度和背景颜色,以便更好地展示效果。
阅读全文