显示弹性顺序 CSS

Question

我有一个网格，将显示许多包含内容的 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>有谁知道最好的方法来做到这一点？

Answer 1

您可以使用 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>

Answer 2

您需要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 元素。