javascript - 在较小的屏幕上重新排序 DIV

Question

我们正在寻找一种解决方案，以便在屏幕尺寸变小时对 DIV 进行重新排序。

我们的 div 图像是灰色和白色的。

在大于 1024 像素的屏幕尺寸上，我们使用 3 列布局。 如果屏幕尺寸变小，我们将使用 2 列布局。 问题是我们必须在 2 列布局上重新排序 div。 否则布局就会破坏，我们就没有国际象棋图案。

看看应该在哪里进行:printnil.com

@media only screen and (min-width: 0px)  {
      .mix {width: 100%;}
}
 @media only screen and (min-width:568px) {
     .mix {width: 50%;}
}  

@media only screen and (min-width:1024px) {
   .mix {width: 33.333%;}
 }


<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Urkundenmappe - DIN 4,95 €">

<div class="infogrey">  
<h2 class="producttitle">Urkundenmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Sammelmappe - DIN 4,95 €">

<div class="infowhite">    
<h2 class="producttitle">Sammelmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>  





<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Angebotsmappe - DIN 4,95 €">

<div class="infogrey">    
<h2 class="producttitle">Angebotsmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>    





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Schnellhefter - DIN 4,95 €">

<div class="infowhite">      
<h2 class="producttitle">Schnellhefter</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>  





<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Klemmmappe - DIN 4,95 €">

<div class="infogrey">        
<h2 class="producttitle">Klemmmappe</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>    





<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Ringordner - DIN 4,95 €">

<div class="infowhite">          
<h2 class="producttitle">Ringordner</h2>
<span class="price">4,95 €</span>
</div>


</a>

</div>

也许是 JavaScript 解决方案？

Answer 1

如果不需要支持IE8及更早版本，可以使用CSS3 nth-child() 。 css设计是为了说明，将其更改为您需要的:

.mix
{
    float: left;
    text-align: center;
    border: 1px solid;
}

.mix img
{
    display: inline-block;    
    max-width: 50%;
}

@media only screen and (min-width:568px)
{
    .mix
    {
        width: 50%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: #999;
    }  
}

@media only screen and (min-width:1024px)
{
    .mix
    {
        width: 33.333%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: none;
    }

    .mix:nth-child(odd)
    {  
        background: #999;
    }
}

示例:http://jsfiddle.net/7h36fjnq/ - 调整窗口大小以查看其工作情况。