如何在沒有 CSS 網格或 HTML 表格的情況下將 Div 跨多行和多列？

如何在沒有CSS 網格或HTML 表格的情況下將一個Div 跨多行和多列

通常，我們會遇到創建元素跨越的類似網格佈局的任務多行和多列。然而，利用 CSS 網格或 HTML 表格可能不是理想的方法。本文提供了一個非網格、非表格的解決方案。

考慮一個具有五個元素行的程式碼片段，其目標是將較大的元素放置在中間。使用display: inline-block屬性，我們可以實現水平佈局：

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

但是我們要如何處理垂直跨度呢？

然而，在2017年，各大瀏覽器都發布了更新全面支援 CSS 網格佈局，提供簡單的解決方案。透過利用display: grid 屬性，我們可以建立網格佈局，而無需更改HTML 或新增巢狀容器：

<code class="css">#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}</code>

要跨多個行和列跨越元素，我們使用grid-row 和grid -column屬性：

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

因此，我們實作了元素跨越多行和多列的網格佈局，而無需求助於HTML 表格或CSS網格。

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