如何在不使用网格或表格布局的情况下使 Div 跨网格中的多行和多列？

如何使用非网格技术使 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中文网其他相关文章！