如何在不同高度的两个列中显示彼此相邻的图像

Question

我遇到以下问题。我希望能够在两列中显示图库。图像具有不同的高度。我尝试过使用带有列数的砌体方法。这很好用，但问题是因为一旦我调整大小，网站需要响应它显示在1列中的everthing ..但由于我使用列而不是行，图像的顺序不一样......

所以这是我正在使用的代码

 .left {
        float: left;
        width: 45%;
        margin: 1px;
    }
    .right {
        float: right;
        width: 45%;
    }

    .test{
        margin-bottom: 10px;

    }
    .test:after {
        clear: left;

    }
    img {
        max-width: 100%;
        height: auto;
    }

<div class="container">
    <div class="left">
      <img src="1.jpg" alt="">
    </div>
    <div class="left test">
        <img src="2.jpg" alt="">
    </div>              

    <div class="left">
      <img src="3.jpg" alt="">
    </div>
    <div class="left test">
        <img src="4.jpg" alt="">
    </div>              

    <div class="left">
      <img src="5.jpg" alt="">
    </div>
    <div class="left test">
        <img src="6.jpg" alt="">
    </div>              

    <div class="left">
      <img src="7.jpg" alt="">
    </div>
    <div class="left test">
        <img src="8.jpg" alt="">
    </div>  
  </div>

我在下图中显示的问题。

因此，图像7应显示在图像5下，图像8应显示在图像7当前所在的位置。

我做错了什么？必须只有CSS，没有JS

如果我使用列计数，则问题是它处于响应状态时...它按以下顺序显示图像1,3,5,8,2,4,6,7而不是1,2,3 ....

由于

Answer 1

不要清除rem // Using absolute paths directly prevents from having to change the working directory: for %%f in ("%~1\*.mp3") do move "%%~f" "%~f1(%%nxf).mp3" :end 上的花车，而是要清除自己的花车。

示例

:after