棋盤式布局CSSJS-有解無憂

我需要一個棋盤布局來顯示元素，即單個元素在布局中以兩種顏色顯示，就像棋盤一樣。元素來自 CMS，并且需要編輯器插入元素以使彩色布局適合（顏色始終交替）。編輯器給每個元素一個背景顏色。這里的一個例子是在桌面視圖中顯示了一個 4 棋盤。然而，在移動視圖中，棋盤應該包裹并包裹到 3 棋盤。這也有效，但結果是，如附圖所示，顏色的變化不再正確。有沒有辦法使用 Css（SCSS，例如使用 Order）來合理地重新排列元素？

棋盤式布局 CSS JS

這里截取了一個簡短的代碼：html：

<section class="checkboard-container">
 <div class="element"/>
  <div class="element"/>
  ....
</section>

CSS：

.checkboard-container {
  display: flex;
  flex-items: wrap;
  Align-items: stretch;
}

.element {
 flex-basis: 25%;
 min-width: 25%;
 padding: 0;
 
 @media only screen and (max-width: 900px) {
   flex-basis: 33%;
   min-width: 33%;
 }
}

uj5u.com熱心網友回復：

在這種情況下，如果您只關心背景顏色而不關心元素的內容，那么您可以利用媒體查詢來更改當前元素的背景顏色，以保持桌面和移動設備上的方格效果一致。

section {
  display:flex;
  flex-wrap: wrap;
}
div {
    width: 25%;
    height: 100px;
}

/* 4 column colouring */
div:nth-child(8n 1), div:nth-child(8n 3), div:nth-child(8n 6), div:nth-child(8n 8) {background-color:black;}
div:nth-child(8n 2), div:nth-child(8n 4), div:nth-child(8n 5), div:nth-child(8n 7) {background-color:gray;}

@media screen and (max-width: 800px) {
    div {width:33%;background-color: black;}
    div:nth-child(6n 1),div:nth-child(6n 3), div:nth-child(6n 5) {background-color:black;}
    div:nth-child(6n 2), div:nth-child(6n 4), div:nth-child(6n 6) {background-color:gray;}
}

    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>

SCSS版本：

    /* 4 column colouring */
section {
    display: flex;
    flex-wrap: wrap;
}
div {
    width: 25%;
    height: 100px;
    &:nth-child(8n 1),&:nth-child(8n 8),&:nth-child(8n 3),&:nth-child(8n 6),&:nth-child(8n 8) {
        background-color: black;
    }
    &:nth-child(8n 2),&:nth-child(8n 5),&:nth-child(8n 7),&:nth-child(8n 4) {
        background-color: gray;
    }
}
@media screen and (max-width: 800px) {
    div {
        width: 33%;
        background-color: black;
        &:nth-child(6n 1),&:nth-child(6n 3),&:nth-child(6n 5) {
            background-color: black;
        }
        &:nth-child(6n 2),&:nth-child(6n 6),&:nth-child(6n 4)  {
            background-color: gray;
        }
    }
}

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

標籤：javascripthtmlcss布局

上一篇：如何使黑色部分透明以顯示白色背景？

下一篇：hr在div中垂直居中