van-col 里面的两个div
时间: 2025-06-27 09:00:16 浏览: 24
### 如何在 Vant UI 的 `van-col` 组件中设置两个 div 的布局与样式
在 Vant UI 中,`van-row` 和 `van-col` 是用于实现栅格系统的组件。通过合理配置 `span` 属性以及其他 CSS 样式属性,可以轻松实现两列或多列的布局需求。
以下是具体方法:
#### 使用 `van-row` 和 `van-col` 实现两列布局
可以通过将父容器设为 `van-row` 并在其内部放置两个子容器作为 `van-col` 来创建两列布局。每列占据一定的宽度比例,由 `span` 属性控制[^1]。
```html
<template>
<div>
<!-- 行 -->
<van-row>
<!-- 左侧列 -->
<van-col span="12">
<div style="height: 100px; background-color: lightblue;">
左侧内容
</div>
</van-col>
<!-- 右侧列 -->
<van-col span="12">
<div style="height: 100px; background-color: lightgreen;">
右侧内容
</div>
</van-col>
</van-row>
</div>
</template>
```
在此示例中:
- `span=12` 将每一列分配为总宽度的一半(默认情况下,栅格系统分为 24 列)。因此,左侧和右侧各占一半的空间。
- 每个 `div` 都设置了固定高度以及背景颜色以便于观察效果。
#### 自定义间距与对齐方式
如果希望调整列之间的间距或者改变垂直方向上的排列方式,则可通过额外的类名或内联样式来完成。
##### 添加水平间隔
利用内置 gutter 参数可以在相邻列之间增加间隙。
```html
<van-row gutter="20"> <!-- 设置 gutter 值为 20px -->
<van-col span="12">
<div style="height: 100px; background-color: lightcoral;">左列</div>
</van-col>
<van-col span="12">
<div style="height: 100px; background-color: lightskyblue;">右列</div>
</van-col>
</van-row>
```
此处引入了 `gutter="20"` ,表示左右两侧会分别留出 10px 的空白区域。
##### 修改垂直居中
为了使内容能够沿中心线分布,可借助 Flexbox 技术达成目标。
```css
<style scoped>
.custom-row {
display: flex;
align-items: center; /* 让子项竖直方向上居中 */
}
</style>
```
随后应用到模板部分如下所示:
```html
<van-row class="custom-row">
<van-col span="8"><div>顶部文字</div></van-col>
<van-col span="8"><div>中间图片</div></van-col>
<van-col span="8"><div>底部按钮</div></van-col>
</van-row>
```
这样就能让三段信息均匀分布在视图范围内并保持良好的视觉体验。
---
### 注意事项
当涉及到更复杂的响应式设计时,可能还需要考虑不同屏幕尺寸下的表现形式。此时建议查阅官方文档了解更多高级特性支持情况。
阅读全文
相关推荐



















