如何用1個大柱子制作2x2-有解無憂

我正在嘗試制作一個 3 列網格，其中第二列同時擴展了 Col-1 和 Col-3 我專門制作了一張影像以更好地表示我正在嘗試做的事情。

我正在使用 bootstrap 5 并且我已經閱讀了他們關于網格布局和偏移量的頁面，但我仍然沒有弄清楚如何做到這一點。

我一直在糾結如何將第二列擴展到第三列。

如何用 1 個大柱子制作 2x2

目前我已經為此完成了 0 個 CSS，并且代碼中沒有任何其他內容與頁面的靜態內容部分互動。所以很容易復制。

我目前的代碼：

<!--Static Content-->
    <div class="" id="static-content-container" style="background-color: yellow;">
      <div class="row">
        <div class="col-md-9">
          <p>Column 1</p>
        </div>
        <div class="col-md">
          <p>Column 2</p>
        </div>
        <div class="col-md-9">
          <p>Column 3</p>
        </div>
      </div>
    <!--/Static Content-->

如果我在這里遺漏了一些東西供您復制，請告訴我您需要什么，我很樂意為您提供。

uj5u.com熱心網友回復：

我認為使用 flex 執行此操作的唯一方法是更改??您的 html 結構并將第一列和第三列分組并使用display: contents：

顯示代碼片段

.row {
  display: flex;
  width: 100%;
}

.col-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.col-2 {
  flex-grow: 1;
  background: green;
}

@media screen and (max-width:768px) {
  .row {
    flex-direction: column;
  }
  .col-wrapper {
    display: contents;
    width: 100%;
  }
  .col-1 {
    order: 1;
  }
  .col-2 {
    order: 2;
  }
  .col-3 {
    order: 3;
  }
}

<div class="row">
  <div class="col-wrapper">
    <div class="col col-1">col 1</div>
    <div class="col col-3">col 3</div>
  </div>
  <div class="col-wrapper">
    <div class="col col-2">col 2</div>
  </div>
</div>

如果您無法更改 html 結構，則最好使用 css grid：

顯示代碼片段

@media screen and (min-width: 768px) {
  .wrapper {
    display:grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap:10px;
  }
  
  .col-2 {
    background: green;
    grid-row: 1 / 3;
    grid-column: 2;
  }
}

<div class="wrapper">
  <div class="col-1">
    col1
  </div>
  <div class="col-2">
    col2
  </div>
  <div class="col-3">
    col3
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375093.html

標籤：html css

上一篇：帶有3個標題和colspan的Html表

下一篇：Scala：檢查字串中是否只有行為奇怪的數字