<el-card>卡片循环的时候,一行固定五个,设置好相隔宽度
时间: 2024-03-07 13:46:30 浏览: 42
您可以使用以下代码实现:
```html
<el-row>
<el-col v-for="item in list" :key="item.id" :span="5">
<el-card>
<!-- 卡片内容 -->
</el-card>
</el-col>
</el-row>
<style>
.el-row {
margin-left: -10px;
margin-right: -10px;
}
.el-col {
padding-left: 10px;
padding-right: 10px;
}
</style>
```
其中,`list`是一个数组,包含需要循环渲染的数据。`<el-row>`和`<el-col>`是Element UI的布局组件,用于实现网格布局。通过将`<el-col>`的`span`属性设置为5,可以让每个卡片占据一行中的五分之一。
为了让卡片之间有间隔,我们设置了一些样式。具体来说,我们通过设置`.el-row`的左右margin为-10px,来让每一行的卡片之间有10px的间隔。而通过设置`.el-col`的左右padding为10px,则可以让每个卡片内部的内容距离容器边缘有10px的距离。
相关问题
<el-card>带图片、内容和操作按钮的卡片,循环的时候,一行固定五个,设置好相隔宽度
您可以使用以下代码实现:
```html
<el-row>
<el-col v-for="item in list" :key="item.id" :span="5">
<el-card>
<div class="card-image">
<img :src="item.imageUrl" alt="">
</div>
<div class="card-content">
<p>{{ item.title }}</p>
<p>{{ item.description }}</p>
</div>
<div class="card-actions">
<el-button>{{ item.actionText }}</el-button>
</div>
</el-card>
</el-col>
</el-row>
<style>
.el-row {
margin-left: -10px;
margin-right: -10px;
}
.el-col {
padding-left: 10px;
padding-right: 10px;
}
.card-image {
height: 150px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
padding: 20px;
text-align: center;
}
.card-actions {
padding: 0 20px 20px;
text-align: center;
}
</style>
```
其中,`list`是一个数组,包含需要循环渲染的数据。每个数据对象包括`imageUrl`、`title`、`description`和`actionText`四个属性,分别代表图片地址、标题、描述和操作按钮文本。
我们将图片、内容和操作按钮分别放在三个`div`中,并设置了一些样式来美化卡片。具体来说:
- `.card-image`用来放置图片,设置了高度和溢出隐藏,以及图片宽高比为1:1的样式。
- `.card-content`用来放置内容,设置了内边距和文本居中样式。
- `.card-actions`用来放置操作按钮,设置了内边距和文本居中样式。
为了让卡片之间有间隔,我们设置了一些样式,具体可以参考上一个问题的回答。
<el-card>带图片、内容和操作按钮的卡片,循环的时候,一行固定五个,设置好相隔宽度,自动适应屏幕
您可以使用以下代码实现:
```html
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in list" :key="item.id">
<el-card>
<div class="card-image">
<img :src="item.imageUrl" alt="">
</div>
<div class="card-content">
<p>{{ item.title }}</p>
<p>{{ item.description }}</p>
</div>
<div class="card-actions">
<el-button>{{ item.actionText }}</el-button>
</div>
</el-card>
</el-col>
</el-row>
<style>
.card-image {
height: 150px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
padding: 20px;
text-align: center;
}
.card-actions {
padding: 0 20px 20px;
text-align: center;
}
</style>
```
其中,`list`是一个数组,包含需要循环渲染的数据。每个数据对象包括`imageUrl`、`title`、`description`和`actionText`四个属性,分别代表图片地址、标题、描述和操作按钮文本。
我们使用了Element UI的`<el-row>`和`<el-col>`组件来实现响应式布局。通过设置不同大小的屏幕下每个`<el-col>`占据的宽度,可以实现在不同设备上卡片的适应性布局。具体来说,我们将`<el-row>`组件的`gutter`属性设置为20,来控制卡片之间的间隔。
为了让卡片之间有间隔,我们设置了一些样式,具体可以参考上一个问题的回答。