html - CSS nth-child transform translate calculations 小错误

Question

我在正确更改某些列表上的位置时遇到了一些问题。

JSFiddle 快速模型:https://jsfiddle.net/3Lu3cafj/

我有正常的列表项...

12个3个4个5个6个78

但是在移动设备上，我需要更改元素的位置，以便图像在桌面上左右显示，它们并排显示，因此尝试做到这一点...

13个2个5个4个76个8

如果您明白我的意思，只需交换一点像奇数和偶数...抱歉，如果在第二个数字示例中犯了错误，但会明白我目前拥有的代码的意思。我的代码有效....但似乎偶数不显示最后一项

@media only screen and (max-width: 767px) {
  .collection-list {
    .collection-list-item {
      .collection-list-hover-button {
        .button { 
          padding: 5px 8px !important;
          border: 1px solid #ffffff !important;
        }
      }
      &.collection-hover {
        width: 100% !important;
        margin-left: 0 !important;
      margin-bottom: 0px !important;

        &:nth-child(2n){
          margin-left: 0;
        }
        &:nth-child(4n - 2) {
          -webkit-transform: translateY(100%);
          -moz-transform: translateY(100%);
          transform: translateY(100%);
        }
        &:nth-child(4n - 1) {
          -webkit-transform: translateY(-100%);
          -moz-transform: translateY(-100%);
          transform: translateY(-100%);
        }

      }
    }
  }
}

<h1>
    even amount
    </h1>
    
    <ul class="collection-list">
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 1">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 2">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 3">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 4">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 5">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 6">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 7">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 8">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 9">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 10">
        </a>
      </li>
    </ul>
    
    
    
    
    <h1 style="clear: both;margin-top: 3em;">
    odd amount
    </h1>
    
    <ul class="collection-list">
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 1">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 2">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 3">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 4">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 5">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 6">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 7">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 8">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 9">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 10">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 11">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 12">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 13">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 14">
        </a>
      </li>
      <li class="collection-list-item grid-item first collection-hover">
        <a href="/collections/butterfly-sofa" class="position-left">
            <img src="http://placehold.it/350x150?text=image 15">
        </a>
      </li>
    </ul>

可以看到这里没有显示最后一项:https://www.ambientlounge.eu/collections/outdoor-bean-bags

但是在其他部分显示了所有并且只能解决因为这个有偶数而上面的没有但可能是错误的....

https://www.ambientlounge.eu/collections/indoor-bean-bags

您只能在移动设备/或移动设备尺寸的视口(viewport)上看到这种位置变化

Answer 1

这是 flex 的用途，在 flex 子节点上使用 order 属性。

ul {
  display: flex;
  flex-direction: column;
}
@media (max-width: 420px) {
  li:nth-child(1), li:nth-child(3) {
    order: -3;
  }
  li:nth-child(2), li:nth-child(5) {
    order: -2;
  }
  li:nth-child(4), li:nth-child(7) {
    order: -1;
  }
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>