所以我有一個復雜的設定。
我在大型設備上有兩行三個 div。
相似。
<div class="row row-1">
<div class"square">square 1</div>
<div class"square">square 2</div>
<div class"square">square 3</div>
</div>
//some more html
<div class="row row-2">
<div class"square">square 4</div>
<div class"square">square 5</div>
<div class"square">square 6</div>
</div>
在移動設備上查看時，我需要在頂行中顯示每行的前 2 個方格。以及底行中每行的最后一個方格。所以它會喜歡下面的
<div class="row row-1">
<div class"square">square 1</div>
<div class"square">square 2</div>
<div class"square">square 4</div>
<div class"square">square 5</div>
</div>
//some more html
<div class="row row-2">
<div class"square">square 3</div>
<div class"square">square 6</div>
</div>
做這個的最好方式是什么？我正在考慮使用 jquery 來檢測螢屏大小并只移動方塊，但這是最簡單的嗎？
謝謝
uj5u.com熱心網友回復：
您無法使用 CSS 將元素從一個包裝器移動到另一個包裝器，因此 JS 將是您唯一的選擇。您也許可以使用 CSS-Grid 做一些事情，但這取決于您的“更多 HTML”是什么。
例如，利用display:contents拆開包裝器，然后使用 CSS-Grid 放置相關子項...
正如我所提到的，這是非常具體的，需要“更多 HTML”的詳細資訊，我在本示例中假設它是單個 div。
.row {
display: contents;
}
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
.row-2 :nth-child(1),
.row-2 :nth-child(2) {
grid-row: 2;
}
.content {
grid-row: 3;
grid-column: span 2
}
div {
outline: solid 1px lightgrey;
}<div class="row row-1">
<div class "square">square 1</div>
<div class "square">square 2</div>
<div class "square">square 3</div>
</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod unde doloremque eum incidunt provident pariatur fugiat repellendus iste, vitae excepturi temporibus, illo voluptates rerum assumenda quo corrupti sapiente odit, labore tenetur dignissimos!
Culpa, aliquam unde!</div>
<div class="row row-2">
<div class "square">square 4</div>
<div class "square">square 5</div>
<div class "square">square 6</div>
</div>uj5u.com熱心網友回復：
你可以嘗試使用 flex box 做這樣的事情。這意味著洗掉行 div 容器并只有一個容器。當然，您將使用媒體查詢觸發訂單 css。
鏈接到小提琴
.cont {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
}
.cont-2 .square:nth-child(1) {
order: 1;
}
.cont-2 .square:nth-child(2) {
order: 2;
}
.cont-2 .square:nth-child(3) {
order: 5;
}
.cont-2 .square:nth-child(4) {
order: 3;
}
.cont-2 .square:nth-child(5) {
order: 4;
}
.cont-2 .square:nth-child(6) {
order: 6;
}
.cont-2 .square {
background-color: purple;
color: #000;
}
.square {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
margin: 1%;
background-color: black;
color: #fff;
}<div class="cont cont-1">
<div class="square">square 1</div>
<div class="square">square 2</div>
<div class="square">square 3</div>
<div class="square">square 4</div>
<div class="square">square 5</div>
<div class="square">square 6</div>
</div>
<div class="cont cont-2">
<div class="square">square 1</div>
<div class="square">square 2</div>
<div class="square">square 3</div>
<div class="square">square 4</div>
<div class="square">square 5</div>
<div class="square">square 6</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334930.html