分栏距离
文档实例
<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>例子
<el-row :gutter="28" type="flex" align="middle" style="flex-wrap: wrap; align-items: stretch"> <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"> <div class="grid-content bg-purple" style="background: red;height: calc(100% - 28px);margin-top: 28px;word-wrap: break-word;">fwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergerger </div> </el-col> <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"> <div class="grid-content bg-purple" style="background: red;height: calc(100% - 28px);margin-top: 28px;word-wrap: break-word;">fwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergerger </div> </el-col> <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"> <div class="grid-content bg-purple" style="background: red;height: calc(100% - 28px);margin-top: 28px;word-wrap: break-word;">fwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergergerfwerfergerger </div> </el-col></el-row>成果
组合布局
例子
设计图
代码
<div class="grid-content bg-purple" style="height: calc(100% - 29px); word-wrap: break-word" > <div class="pledge_XXX_block"> <el-row type="flex" align="middle" style="flex-wrap: wrap; align-items: center"> <el-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11"> <div style="height:150px;"></div> </el-col> <el-col :xs="24" :sm="13" :md="13" :lg="13" :xl="13"> <div class="grid-content bg-purple" style="word-wrap: break-word"> <div class="pledge_XXX_block_texBox"> <div class="pledge_XXX_block_start">开始</div> <div class="pledge_XXX_block_text">XXXXX将享有手续费减免、额定XX处分、更高的XX处分等等</div> </div> </div> </el-col> </el-row> </div></div>Less
.pledge_XXX_block { width: 100%; position: relative; /* height: 150px; */ margin-top: 40px; background: #007CFF url(../assets/images/XXXzoology/pledge_banner.png) no-repeat; background-position: left top; background-size: auto 150px; .pledge_XXX_block_texBox{ margin: 10px; .pledge_XXX_block_start{ width: 131px; height: 37px; border-radius: 4px; // padding: 5px 25px; background: #ffffff; color: #0060ef; font-size: 20px; text-align: center; line-height: 37px; } .pledge_XXX_block_text{ width: 100%; margin-top: 17px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; } }}