用css

我設計這個網站haidar.ws/gar3和我有一些圖像的移動視圖用css

的訂單問題交換在移動設備上元素的順序我定製了貓頭鷹滑塊有不同鑑於手機和我用於定製

.fixed-hero-slider .owl-stage { 
transform: inherit !important; 
transition: inherit !important; 
width: 100% !important; 
} 

.fixed-hero-slider .owl-item.cloned { 
    display: none; 
} 
.fixed-hero-slider .owl-item 
{ 
    width : 100% !important; 
    float: right !important; 
    margin-right: 0px !important; 
}

以下CSS當我從.fixed-hero-slider .owl-item Style刪除width: 100%，我發現，圖像是正確的順序像下面的圖片

但是當我添加它，瀏覽器採取最合適的圖像作爲第一個像下面的圖片

，而我想最左邊的是第一個，這樣我怎麼能解決這個問題呢？

來源

2016-04-26 Haidar

擺脫float: right !important使它們按照標記順序排列。

來源

2016-04-26 19:08:16 johnniebenson

This。或者使用flexbox，感覺你的css肌肉膨脹，就像goku開動SSJ。 – Pytth

，因爲它是一個阿拉伯語網站我需要在網頁視圖中的順序相同，因爲用戶將從右到左看圖像，在英語中正確的圖像是最後一個，但在阿拉伯語中是第一個，在手機上它認爲正確的一個是第一個，所以它在移動視圖中看起來是第一個 – Haidar

恢復HTML中圖像的順序，以便當前第一張圖像是最後一張 - 這將是您正確的移動視圖順序。然後，在主桌面視圖使用以下CSS來扭轉這一順序（使用display: inline-block，而不是float爲.fixed-hero-slider .owl-item，其他樣式保持不變）：

.fixed-hero-slider .owl-stage { 
    direction: rtl; 
} 
.fixed-hero-slider .owl-item { 
    display: inline-block; 
    direction: ltr; 
}

對於移動視圖恢復項目訂購併再次刪除float for .fixed-hero-slider .owl-item：

.fixed-hero-slider .owl-stage { 
    direction: ltr; 
} 
.fixed-hero-slider .owl-item { 
    width: 100% !important; 
    margin-right: 0px !important; 
}

來源

2016-04-26 20:44:23 Andrey

回答

相關問題