我有一個網格，將顯示許多包含內容的 div。目前，它分為 2 行，將 div 的高度分開 50%。這是正確的，但順序如下：-1,3,5, 7,9,11
2,4,6, 8,10,12不過我希望它以以下方式顯示：-1,2,3, 7,8,9
4,5,6, 10,11,12我想保持水平滾動，因此每行只顯示 2 個 div。理想情況下，如果可能的話，我不想添加任何額外的 div，我只需要更改順序。我還希望它顯示前 6 個帖子，即 1、2、3、4、5、6。我在這里制作了一個代碼筆：- https://codepen.io/scottYg55/pen/bGdXEVw.tiles { height: 1000px; overflow-x: scroll !important;}.tiles { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; flex-wrap: wrap; height: 100vh; overflow: auto; position: relative; /* transform: rotateX(180deg); */}.tiles .tile:nth-child(1n) { flex-basis: calc(50%); background: red !important;}.tiles .tile { flex-basis: calc(100% / 2); width: calc(100% / 3); position: relative; background-repeat: no-repeat; background-size: cover; display: flex; color: white; overflow: hidden; box-sizing: border-box; /* transform: rotateX(180deg); */}<div class="tiles"> <div class="tile">1</div> <div class="tile">2</div> <div class="tile">3</div> <div class="tile">4</div> <div class="tile">5</div> <div class="tile">6</div> <div class="tile">7</div> <div class="tile">8</div> <div class="tile">9</div> <div class="tile">10</div> <div class="tile">11</div> <div class="tile">12</div></div>有誰知道最好的方法來做到這一點？
2 回答
慕尼黑的夜晚無繁華
TA貢獻1864條經驗 獲得超6個贊
您可以使用 CSS 網格輕松完成此操作：
.tiles {
display: grid;
grid-auto-flow: column dense;
grid-auto-columns:calc((100% - 20px)/3);
grid-auto-rows: 80px;
grid-gap:10px;
overflow: auto;
counter-reset:num 0;
}
.tiles .tile {
background: red;
font-size:50px;
color:#fff;
grid-row:1;
}
.tiles .tile:nth-child(6n + 4),
.tiles .tile:nth-child(6n + 5),
.tiles .tile:nth-child(6n + 6){
grid-row:2;
background:blue;
}
.tiles .tile:before {
content:counter(num);
counter-increment:num;
}
<div class="tiles">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
您需要order為每個元素使用該屬性。
可能有更好的方法來設置號碼order，但手動它看起來像這樣：
.tiles {
height: 1000px;
overflow-x: scroll !important;
}
.tiles {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
overflow: auto;
position: relative;
/* transform: rotateX(180deg); */
}
.tiles .tile:nth-child(1n) {
flex-basis: calc(50%);
background: red !important;
}
.tiles .tile:nth-child(1) {
order: 1;
}
.tiles .tile:nth-child(2) {
order: 3;
}
.tiles .tile:nth-child(3) {
order: 5;
}
.tiles .tile:nth-child(4) {
order: 2;
}
.tiles .tile:nth-child(5) {
order: 4;
}
.tiles .tile:nth-child(6) {
order: 6;
}
.tiles .tile:nth-child(7) {
order: 7;
}
.tiles .tile:nth-child(8) {
order: 9;
}
.tiles .tile:nth-child(9) {
order: 9;
}
.tiles .tile:nth-child(10) {
order: 10;
}
.tiles .tile:nth-child(11) {
order: 11;
}
.tiles .tile:nth-child(12) {
order: 12;
}
.tiles .tile {
flex-basis: calc(100% / 2);
width: calc(100% / 3);
position: relative;
background-repeat: no-repeat;
background-size: cover;
display: flex;
color: white;
overflow: hidden;
box-sizing: border-box;
/* transform: rotateX(180deg); */
}
<div class="tiles">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
<div class="tile">8</div>
<div class="tile">9</div>
<div class="tile">10</div>
<div class="tile">11</div>
<div class="tile">12</div>
</div>
編輯：由于您使用的是 WordPress，因此您可以使用modulo運算符來計算帖子數并每六個帖子換行：https://www.php.net/manual/en/language.operators.arithmetic.php
示例查詢（因為我不知道你的是什么樣子）：
if ( have_posts ) :
// This is how many posts your query found
$post_count = $wp_query->found_posts;
// Setup an iterator to count posts;
$i = 0;
// start the loop.
while ( have_posts ) : the_post;
// This is where we check the posts to wrap.
// Basically, if the iterator returns the remainder of 0 using 6 as the divider
if ( $i%6 === 0 ) :
echo '<div class="post-wrapper">';
endif;
/* ALL OF YOUR POST OUTPUT CODE GOES HERE */
// Check the iterator again to add the closing wrapping div tag.
// If the remainder is 5, that means it will be the last item in the loop or
// if the total count minus 1, that means we are at the end of all posts.
if ( $i%6 === 5 || $i === ( $post_count - 1 ) ) :
echo '</div><!-- /post-wrapper -->';
endif;
// increment the iterator up one every time we loop.
$i++;
endwhile;
endif;
我沒有使用實際的 WP 循環進行測試，但在數組上進行了測試并得到了預期的輸出。使用包裝的內容，您可以更改 CSS 以保持水平滾動，但您可以使用帖子塊作為 Flex 元素。
- 2 回答
- 0 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消