让两个盒子垂直justyify-content:spce-between
时间: 2024-09-28 10:01:52 浏览: 38
让两个盒子垂直居间排列,你可以使用CSS的`display: flex; justify-content: space-between;`属性。这里有一个简单的例子:
```css
.container {
display: flex;
height: /* 容器高度 */;
align-items: center; /* 如果你想保持顶部对齐 */
flex-wrap: wrap; /* 如果内容超过一行 */
}
.box {
width: 50%;
background-color: #f0f0f0;
margin-bottom: 1rem; /* 用于添加间距,可以根据需要调整 */
}
```
在这个例子中:
- `.container` 是包含两个`.box`的容器,设置了`flex`布局。
- `justify-content: space-between;` 确保两个`.box`之间有等量的空间。
- `align-items: center;` 可选地设置盒子里的内容在垂直方向上居中。
如果你有两个具体的元素需要这样布局,可以像下面这样应用样式:
```html
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
```
阅读全文