Question

在我的水平菜单中（使用ul + floated 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属性，该属性允许您设置各种布局流程，包括“从下到上”。如果您对此感兴趣，请查看此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

CSS：第一行以上的新行？

2 个答案: