如何扭轉元素的順序響應模式

我創建一個負責任的網頁與信息圖表的內容和我遇到這樣的問題：如何扭轉元素的順序響應模式

HTML結構，其中我的問題是，

<div class="holder"> 
    <div class="one card"></div> 
    <div class="two card"></div> 
    <div class="three card"></div> 
</div> 
<div class="holder">  
    <div class="three card"></div>  
    <div class="two card"></div> 
    <div class="one card"></div> 
</div>

在600像素以上的視口，我希望我的信息圖可以水平顯示（每個卡片@display：inline-block），每個圖層交替開始，這很好。

問題是，如果視口小於600px，我試圖垂直顯示信息圖（每個卡片@display：block）。這種結構（不交）：

<div class="holder"> 
    <div class="one card"></div> 
    <div class="two card"></div> 
    <div class="three card"></div> 
</div> 
<div class="holder">  
    <div class="one card"></div> 
    <div class="two card"></div> 
    <div class="three card"></div> 
</div>

什麼是從第一我的結構轉移到第二個當視低於600px的最好方法是什麼？

Here's an example

來源

2014-09-04 Fahren

純CSS？或jQuery的？ – 2014-09-04 08:41:49

@ C-linkNepal最好的方法是什麼？ – Fahren 2014-09-04 08:44:26

如果你可以使用jQuery，那麼它很容易轉移.... – 2014-09-04 08:45:55

您可以扭轉第二.holder元素打了一下，以顯示的項目的順序：table | table-footer-group | table-header-group。

嘗試重寫你的媒體查詢，像這樣：http://jsfiddle.net/bs5dam2j/

@media (max-width: 400px){ 

    .holder .card { display: block; } 

    .holder + .holder { display: table; } 
    .holder + .holder .one { display: table-header-group; } 
    .holder + .holder .three { display: table-footer-group; } 

    /* trick to show .one and .three when they are empty */ 
    .holder + .holder .card:before { 
     display: inline-block; 
     content: ""; 
     height: 100px; 
     width: 1px; 
    } 
}

來源

2014-09-04 08:56:03 fcalderan

謝謝，我想我讀了更多關於CSS顯示錶..我試圖與js/jquery解決方案，但我發現這更快（性能）..與js我也必須編寫一個腳本來恢復視圖結構時，視口再次超過600px。 – Fahren 2014-09-04 09:04:44

對於> 600px的使用.card{ float-left; width: (100/3)% };
對於< 600px的使用.card{ float: none; display: block; width: 100%; }

來源

2014-09-04 08:42:06 Justinas

只要改變你的.holder CSS display:inline-block;到：

.holder{ 
    float:left; 
}

DEMO

來源

2014-09-04 08:48:47 user3241019

使用jQuery，您可以扭轉HTML的順序如下圖所示：

$(window).on('resize',function(){ 
    if($(window).width()<600){ 
     var div= $('.holder'); 
     var divItems = div.children('.card'); 
     div.append(divItems.get().reverse()); 
    } 
}).resize();

來源

2014-09-04 08:49:20

作爲一個純粹的CSS的解決方案，你可以通過180度旋轉.holder容器中，然後通過-180度旋轉箱扭轉排序：

EXAMPLE HERE

@media (max-width: 600px) { 
    .card { display: block; } 

    .holder + .holder { 
     transform: rotate(180deg); 
     direction: rtl; /* Fix the horizontally alignment */ 
    } 

    .holder + .holder .card { 
     transform: rotate(-180deg); 
     direction: ltr; /* Fix the horizontally alignment */ 
    } 
}

值得注意的是CSS變換是支持IE9 +。

這將是非常簡單，如果他們都有一個明確的height和它們的數量是固定的，這樣就可以在視覺上它們通過relative定位移動。

.card { 
    display: block; 
    position: relative; 
} 

.holder + .holder > :first-child { 
    top: 200px; 
} 

.holder + .holder > :last-child { 
    top: -200px; 
}

來源

2014-09-04 08:55:54

這是第二種方法的** [更新的演示]（http://jsfiddle.net/hashem/oahrfn0j/5/）**。 – 2014-09-04 09:01:41

如何扭轉元素的順序響應模式

回答

相關問題