css一个盒子模型里放两列盒子
时间: 2023-08-02 15:22:14 浏览: 185
CSS 盒子模型
5星 · 资源好评率100%
可以使用CSS的Flexbox布局来实现在一个盒子模型里放置两列盒子。以下是实现该布局的示例代码:
HTML:
```
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
```
CSS:
```
.container {
display: flex;
}
.column {
flex: 1;
height: 200px; /* 设置高度 */
margin: 10px; /* 设置外边距 */
background-color: #ccc;
}
```
在以上示例代码中,`.container`元素使用`display: flex`属性来启用Flexbox布局。`.column`元素使用`flex: 1`属性来平均分配剩余的空间,从而实现两列盒子的布局。你可以根据需要修改`.column`元素的高度和外边距属性。
阅读全文