嘗試使用網格系統水平組織引導卡

Question

正如屏幕截圖所示，我試圖讓一張卡占據兩行不同的兩個位置，但我不能讓它水平

在此處輸入圖像描述tps://i.stack.imgur.com/Mi9PZ.png

Answer 1

在一般情況下，您可以嘗試使用 css 網格系統，例如在元素 UI 中，您可以執行這樣的操作。

 <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="12"><div class="grid-content bg-purple"></div></el-col> 
</el-row>
  <el-row :gutter="20">
  <el-col :span="12"><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>

在此處查看實時示例元素 UI 布局示例

您可以查看元素 UI 官方文檔以獲取更多信息元素 UI 布局