网格中的多行和列 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中文网其他相关文章！
