css - CSS：第一行上方的新行？

Question

在我的水平菜单（使用 ul + 浮动 li 完成）中，如果 li 元素太多而无法适应当前宽度，则会显示在下一行（第一行下方）。例子：

第一 | 第二 | 第三

第四| 第五

这很正常。但是我怎样才能使下一行在第一行之上呢？例子：

第四| 第五

第一 | 第二 | 第三

因为我正在做一个响应式布局，所以我不能简单地静态定义这个顺序，因为只有在窗口宽度太小而不能在一行中容纳所有项目的情况下它才会自动发生。

在此先感谢，德克

Answer 1

如果浏览器兼容性不是绝对要求，请尝试flex：

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

以上将适用于IE10。您必须查找 -moz- 和 -webkit- 版本，它们在我身上不断变化......

Answer 2

理想情况下，如果您的网站是针对 IE 的，您可以查看writing-mode属性，它允许您设置各种布局流程，包括“从下到上”。如果您对此感兴趣，请查看此博客文章和此演示。

但是这里对您来说“最安全”的解决方案应该是基于 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演示