更改li更改分辨率的順序

我有一個ul，它的工作原理與流動性原理相似。當屏幕分辨率發生變化時，有沒有辦法讓最後的li放在第一位？更改li更改分辨率的順序

編輯： 好的。試圖使它與柔性盒一起工作。

.postpreview ul { 
list-style: none; 
display: inline-flex; 

} 

.postpreview ul li { 
flex: 0 100px 30px; 
} 

@media(max-width: 1000px) { 
postpreview ul { 
flex-direction: row-reverse; 
justify-content: flex-end; 
} 
}

現在，當分辨率更改爲移動設備時，它保持在正確的位置，而我實際上需要它位於頂部。這裏活鏈接 http://soloveich.com/pr6/blog/

來源

2014-02-07 shell

posible with jquery ui and jquery。 –

您想根據屏幕尺寸反轉li訂單嗎？ –

可能使用彈性盒。 – bjb568

CSS-僅使用flexible boxes溶液：

ul { 
    display: flex; 
} 
li { 
    flex: 0 0 30px; 
} 
@media(max-width: 1000px) { 
    ul { 
    flex-direction: row-reverse; 
    justify-content: flex-end; 
    } 
}

Live example，屏幕寬度閾值是1000像素。

更新：如果您需要將佈局從水平改爲垂直，請在媒體查詢中使用flex-direction: column。舉例說明你想要什麼以及什麼時候會有幫助，這個問題可以用一些說明。

來源

2014-02-07 07:22:42

畫得更好看。 Flex箱子看起來棒極了！有一點點重做html。我想我會在某些特定問題出現時開啓一個新問題。感謝您指出這個方向！ – shell

CSS代碼：

nav ul li { display: inline; margin: 0 100px; }

的html代碼：

<nav> 
<ul> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
    <li><a href="#">Text</a></li> 
</ul> 
</nav>

JS代碼：

function Func(){ 
var list = $('nav ul li'), 
    firstLi = list.first().offset().top, 
    lastLi = list.last().offset().top, 
    mLeft = parseInt(list.css('marginLeft')), 
    mRight = parseInt(list.css('marginRight')) 
if(firstLi != lastLi){ 
    --mLeft 
    --mRight 
    list.css({ 
     'marginLeft': mLeft, 
     'marginRight': mRight 
    }) 
    Func(); 
    } 
} 

Func();

另外一個解決方案：

您可以使用不同分辨率的媒體查詢。

來源

2014-02-07 07:16:11 Sandy

http://vanilla-js.com – bjb568

我知道我可以改變媒體查詢的樣式，但真的有辦法改變順序。事情是，第一次，我有博客內容，第二次，我有日期和評論信息。所以當分辨率改變爲移動設備時，日期和評論最終會落在最後。我需要他們在頂部，而保持在更大的分辨率的權利。 – shell

是的，你可以在媒體查詢和jQuery的幫助下做到這一點。就像在各種分辨率上運行jquery一樣。 – Sandy

var litag = $('ul'); 
var litags = litag.children('li'); 
litag.append(litags.get().reverse());

來源

2014-02-07 07:27:05 Prashobh

更改li更改分辨率的順序

回答

相關問題