首頁 >web前端 >css教學 >如何在不使用網格或表格佈局的情況下使 Div 跨網格中的多行和多列?

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

Barbara Streisand
Barbara Streisand原創
2024-11-01 15:08:30996瀏覽

How to Span a Div Across Multiple Rows and Columns in a Grid Without Using Grid or Table Layouts?

如何使用非網格技術使 Div 跨越網格中的多行和多列?

儘管之前已經探索過以下解決方案跨越多行,現在的挑戰在於跨越行和列。要在不使用gridtable 佈局的情況下實現此目的,請考慮以下方法:

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn