如何使用非網格技術使 Div 跨越網格中的多行和多列?
儘管之前已經探索過以下解決方案跨越多行,現在的挑戰在於跨越行和列。要在不使用grid 或table 佈局的情況下實現此目的,請考慮以下方法:
CSS 網格的瀏覽器支援
自從提出這個問題以來,各大瀏覽器都發布了完全支援CSS 網格佈局 的版本。這種簡化的佈局方法消除了對 HTML 修改、嵌套容器或容器高度修復的需求。
CSS 網格實作
這裡是使用CSS 網格的範例實作:
<code class="css">#wrapper { display: grid; /* 1 */ grid-template-columns: repeat(5, 90px); /* 2 */ grid-auto-rows: 50px; /* 3 */ grid-gap: 10px; /* 4 */ width: 516px; } .tall { grid-row: 1 / 3; /* 5 */ grid-column: 2 / 3; /* 5 */ } .wide { grid-row: 2 / 4; /* 6 */ grid-column: 3 / 5; /* 6 */ } .block { background-color: red; }</code>
上面的程式碼使用了CSS網格 具有相同大小的列和自動調整大小的行。 .tall 類別跨越兩行(1 和 2),.wide 類別跨越兩列(3 和 4),如 grid-row 和 grid-column 屬性所示。 grid-gap 屬性在元素之間新增空間。
以上是如何在不使用網格或表格佈局的情況下使 Div 跨網格中的多行和多列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!