我如何像這樣放置 div/卡片？

Question

我在定位 div 時遇到了問題，就像照片中的那樣。

<div class="cards" id="cards">
      <div class="container">
        <div class="single">
          <span class="dot"></span>
        </div>
        <div class="single">


          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
      </div>
    </div>

我已經嘗試過這樣的方法，但我在使用 css 對其進行樣式設定和定位時遇到了麻煩。

單一 div 被命名為前兩張卡/div。 第二個 div 被命名為向下的第二張卡片/div。

Answer 1

CSS 網格可以幫助您處理這些類型的佈局。研究下面的程式碼，了解如何根據模型佈置盒子。

請務必仔細研究 MDN 上有關網格模板區域的以下部分：將網格單元格留空

#

div {
  border: 1px solid black;
}
.strategy {
  grid-area: strategy;
}
.efficient {
  grid-area: efficient;
}
.fast {
  grid-area: fast;
}
.reliable {
  grid-area: reliable;
}
.wrapper {
  width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "fast efficient ." /* 3 cols: fast / efficient / . === empty col */
    ". strategy reliable";
}

<section class="wrapper">
  <div class="fast">Fast</div>
  <div class="efficient">Efficient</div>
  <div class="strategy">Strategy</div>
  <div class="reliable">Reliable</div>
</section>

資源： CSS 網格完整指南