CSS：第一行以上的新行？

在我的水平菜單中（使用ul +浮動的li完成），li元素顯示在下一行（在第一行下面），如果它們太多而不適合當前寬度。例如：CSS：第一行以上的新行？

first |秒|第三個

第四|第五個

這很正常。但要如何才能完成第以上的下一行？例如：

第四|第五個

第一|秒|第三個

由於我正在做一個響應式佈局，我不能簡單地靜態定義這個順序，因爲它只會在窗口寬度太小而不能適合一行中的所有項目的情況下自動發生。

由於提前，德克

來源

2013-05-18 Rob Otter

你有HTML/CSS顯示在正確的順序？ –

如果瀏覽器的兼容性是不是絕對的要求，嘗試flex：

ul { 
    display:flex; 
    display:-ms-flexbox; 
    flex-flow: row wrap-reverse; 
    -ms-flex-flow: row wrap-reverse; 
}

以上將在IE10工作。你必須查看-moz-和-webkit-版本，他們不斷變化我...

來源

2013-05-18 22:44:23

不支持Firefox（Gecko），Internet Explorer不支持，Safari不支持。 - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap –

@ l'L'l [查看這個小提琴]（http://jsfiddle.net/6PP82/）在IE10中並告訴我它不被支持。 –

我不使用IE。 –

理想情況下，如果你的網站是爲IE瀏覽器，你可以看看writing-mode屬性，它可以讓你設置各種佈局流程，包括「從下到上」。如果您對此感興趣，請查看blog post和demo。

但是這裏「最安全」的解決方案應該是基於javascript的。你可以使用jQuery。

所以我們說你菜單：

<div class="menu" id="menu"> 

     <div id="optional-row"></div>    <!-- movable items container --> 

     <div id="main-row"> 
     <div class="item">elem1</div> 
     <div class="item">elem2</div> 
     <div class="item">elem3</div> 
     <div class="item">elem4</div> 
     <div class="item movable">elem5</div> <!-- movable item --> 
     <div class="item movable">elem6</div> <!-- movable item --> 
     </div> 

    </div>

正如你可以看到我已經加入他們的「活動」類中定義的一些元素移動。現在，如果我window.width()太小，我能做到這一點

<!-- don't forget including jquery before --> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    var movables = $(".movable"); 
    // hiding all movable elements 
    movables.hide();     
    movables.each(function(i){ 
    // inserting them in the optional row 
    $("#optional-row").append(($(this).html())); 
    }); 
</script>

這裏是一個codepen demo

來源

2013-05-18 23:42:35 TKrugg

有趣的想法。我將嘗試以此爲基礎來考慮每個可移動項目和容器元素的寬度，並計算當前寬度以找出哪些項目仍然需要移動到上一行。可能會很長，因爲可能會出現第三行是必要的情況。無論如何，感謝這個主意！ –

CSS：第一行以上的新行？

回答

相關問題