首頁 > web前端 > css教學 > 主體

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

Patricia Arquette
發布: 2024-11-04 02:57:01
原創
201 人瀏覽過

How Can I Span a Div Across Multiple Rows and Columns in a Grid Without Using CSS Grid Layout or Tables?

網格中的多行和列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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板