有人可以告訴我為什么第三個 div 看起來那樣而不是在第一個 div 下嗎？我需要在我的 CSS 檔案中寫什么來使第 3 個 div 位于第一個 div 的正下方？

這是 HTML：

<div class="div-main">
  <div class="div-1">
    1
  </div>
  <div class="div-2">
    2
  </div>
  <div class="div-3">
    3
  </div>
</div>

這是CSS：

.div-main {
  border: 5px solid yellow;
  padding: 15px;
}

.div-1 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
}

.div-2 {
  border: 1px solid black;
  padding: 15px;
  width: 69%;
  height: 50vh;
  display: inline-block;
}

.div-3 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
}

uj5u.com熱心網友回復：

為什么會這樣？

默認情況下，block元素，無論是block還是inline-block，都會填滿行中的所有可用空間，所以如果塊應該有重疊的情況，你不能用block方法來實作。

如何解決？

使用CSS 網格方法，您可以確定每個元素在框中的位置。您可以使用 屬性指定列的分布方式grid-template-columns，以及行的分布方式grid-auto-rows。grid-column您還可以使用和確保您當前可用的空間中有多少應該被可用元素填充grid-row。

網格方法：

.div-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.div-1, .div-2, .div-3 {
  border: 1px solid black;
}

.div-1 {
  grid-column: 1 / 2;
  grid-row: 1;
}

.div-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.div-3 {
  grid-column: 1;
  grid-row: 2 / 3;
}

<div class="div-main">
  <div class="div-1">1</div>
  <div class="div-2">2</div>
  <div class="div-3">3</div>
</div>

上面的代碼是如何作業的？

在此示例中，默認情況下，

• 我將列的可用空間分配到 3 個偶數塊 ( grid-template-columns: repeat(3, 1fr))。
• 我將每行的最小值設定為，100px如果容器中的其他塊希望它們增長（grid-auto-rows: minmax(100px, auto)），則允許它們增長。
• 最后，我讓孩子們按照我想要的方式填充可用空間（grid-column: *; grid-row: *;）。

注意1：如果在任何情況下您想讓第三個孩子的身高比第二個孩子大，您可以將 的第二部分更改grid-row: 2 / 3;為更大的數字，例如grid-row: 2 / 4;.

顯示代碼片段

.div-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.div-1, .div-2, .div-3 {
  border: 1px solid black;
}

.div-1 {
  grid-column: 1 / 2;
  grid-row: 1;
}

.div-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.div-3 {
  grid-column: 1;
  grid-row: 2 / 4;
}

<div class="div-main">
  <div class="div-1">1</div>
  <div class="div-2">2</div>
  <div class="div-3">3</div>
</div>

注意 2：grid您可以在CSS-tricks 網站上通過更多示例了解有關 CSS作業原理的更多資訊。

uj5u.com熱心網友回復：

行內元素不能像您想要的那樣定位自己，因為它們是塊級元素。您可以使用 CSS 網格并將 div-2 設定為跨越兩行。網格有很多，但它非常靈活。看一看。我已經注釋了 CSS，所以你可以看到我是如何做到的。

一些關于CSS 技巧的好資源，這里是Kevin Powell的視頻，這是一個方便的介紹。

.div-main {
  border: 5px solid yellow;
  padding: 15px;
  /* this makes a grid layout with 2 columns and as many rows as needed. */
  /* There's only 3 divs so that'll automatically give us 2 rows */
  /* The grid-template-columns property is the width of each column - though there are some qualifications with this */
  display: grid;
  grid-template-columns: 30% 69%;
}

.div-main>div {
  /* I've moved this to its own rule so you don't need to repeat yourself */
  border: 1px solid black;
  padding: 15px;
}

.div-1 {
  /* I've kept the height of your original divs */
  height: 30vh;
}

.div-2 {
  height: 50vh;
  /* setting grid-row: span 2 makes this div use two rows when it's being displayed */
  /* this allows the third div to appear to the left */
  /* in effect there's 4 cells in this grid but the last, bottom right cell is taken up by div-2 as we've told it to span 2 rows */
  grid-row: span 2;
}

.div-3 {
  height: 30vh;
}

<div class="div-main">
  <div class="div-1">
    1
  </div>
  <div class="div-2">
    2
  </div>
  <div class="div-3">
    3
  </div>
</div>

標籤：htmlcss

上一篇：將div高度調整為最大n個子項

下一篇：懸停特定div時顯示多個div