关于前端:Element-Layout-布局的使用

分栏距离

文档实例

<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;
            }
     }
}