use the component card provided by element-ui to display goods. After getting all the goods at the front end, all the goods are displayed by card external v-for loop output.
wants to display four items in one line, but I don"t know how to control the final effect of el-row, and el-col,. There is no gap between each line, and it feels that all products are still displayed on one line, but the display line is changed because there is not enough width. How to solve the above problems?
1. The code is as follows
<el-row>
<el-col :span="4" v-for="project in allprojects" :key="project.pid" :offset="1">
<el-card :body-style="{ padding: "0px", height:"360px"}" shadow="hover" style="width: 260px;height: 320px;">
<div style="padding: 6px;height: 310px;">
<div>
<div><font size="5">{{project.pcname}}</font></div>
<div style="position: relative;top: 15px;text-align: center;">{{project.pname}}</div>
</div>
<div style="position: relative;top: 30px;">
<img src="../images/project/prohead.jpg" class="image">
<div style="position: relative;top: 10px;left: 66px;"><i class="el-icon-time"></i>{{project.pdatesave}}</div>
</div>
<div style="position: relative;top: 45px;">
<i class="el-icon-view"></i><span>{{project.ppageview}}</span>
<el-button type="text"><font size="4"></font></el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
2. The effect is as follows: