如何在不使用 CSS 網格佈局或表格的情況下使 Div 跨越網格中的多行和多列？

網格中的多行和列Div

您尋求一種解決方案來將一個div 跨網格中的多行和多列，不使用CSS 網格佈局或表格。

網格佈局的最新瀏覽器支援

雖然您在發文時擔心網格佈局的瀏覽器支持，但最新版本的主要瀏覽器現在提供全面支持。有關當前瀏覽器支援的詳細信息，請參閱相關文件。

使用CSS 網格佈局的解決方案

使用網格佈局，實現您想要的佈局變得簡單，無需修改HTML，嵌套容器或固定容器高度。這是一個程式碼片段：

<code class="css">#wrapper {
  display: grid; // Enable Grid Layout (1)
  grid-template-columns: repeat(5, 90px); // Define columns (2)
  grid-auto-rows: 50px; // Define rows (3)
  grid-gap: 10px; // Set cell spacing (4)
  width: 516px;
}

.tall {
  grid-row: 1 / 3; // Span across rows 1 to 2 (5)
  grid-column: 2 / 3; // Span across columns 2 to 2 (5)
}

.wide {
  grid-row: 2 / 4; // Span across rows 2 to 3 (6)
  grid-column: 3 / 5; // Span across columns 3 to 4 (6)
}

.block {
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div></code>

此解決方案可以根據您所需的佈局有效地將較大的元素對齊在網格中心。

以上是如何在不使用 CSS 網格佈局或表格的情況下使 Div 跨越網格中的多行和多列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！