• el-row一行放置3个el-col,有时出现空行现象


    利用el-row的type属性,将type设置为flex,启用flex布局,再设置justify和align属性,即可避免该问题出现。

    1. <el-row type="flex" class="row-bg">
    2. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    3. <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    4. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    5. el-row>
    6. <el-row type="flex" class="row-bg" justify="center">
    7. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    8. <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    9. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    10. el-row>
    11. <el-row type="flex" class="row-bg" justify="end">
    12. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    13. <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    14. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    15. el-row>
    16. <el-row type="flex" class="row-bg" justify="space-between">
    17. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    18. <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    19. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    20. el-row>
    21. <el-row type="flex" class="row-bg" justify="space-around">
    22. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    23. <el-col :span="6"><div class="grid-content bg-purple-light">div>el-col>
    24. <el-col :span="6"><div class="grid-content bg-purple">div>el-col>
    25. el-row>

  • 相关阅读:
    countdownlatch 和 completableFuture 和 CyclicBarrier
    Pr:多机位编辑
    DAC测试实验——FPGA学习笔记7
    算法竞赛进阶指南:噩梦(Python)
    MySQL篇---第四篇
    C++内存管理:其七、标准库中的allocator
    电子词典项目
    关于Dubbo传输协议与上传文件的坑
    Ubuntu22.04安装及初始配置
    DEEC算法附Matlab代码
  • 原文地址:https://blog.csdn.net/sinat_34896766/article/details/137220978