如何在没有 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中文网其他相关文章！