CSS：第一行上方的新行？

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

第一|第二|第三

第四|第五

这很正常。但是我怎样才能做到让下一行在第一行的上方呢？例如：

第四|第五

第一|第二|第三

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

提前感谢,，

---

Dirk

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

flex

：

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

---

以上内容将在IE10中起作用。您必须查找-moz-和-webkit-版本，它们在我身上不断变化…

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

flex

：

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

---

以上内容将在IE10中起作用。你必须查找-moz-和-webkit-版本，它们在我身上不断变化…

理想情况下，如果你的网站是IE的，你可以查看

写作模式

属性，它允许你设置各种布局流，包括“自下而上”。如果你对这个感兴趣，看看这个和这个

但是这里最安全的解决方案应该是基于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>  

---

这里有一个

理想情况下，如果你的网站是IE，你可以看看

写作模式

属性，它允许你设置各种布局流程，包括“自下而上”。如果你对这个感兴趣，看看这个和这个

但是这里最安全的解决方案应该是基于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>  

---

这是一个

您是否有按正确顺序显示的html/css？您是否有按正确顺序显示的html/css？不支持Firefox（Gecko），不支持Internet Explorer，不支持Safari。-@l'l'l在IE10中，告诉我它不受支持。也许你应该，在投票否决支持的人之前；）@Kolink：谢谢，它在IE10中确实有效，但浏览器兼容性是一项要求。尽管在您提供的flex wrap页面中使用了链接的各种属性，但至少在FF21中没有任何效果。即使会，我也希望有一个更通用的解决方案。我没想到这会是一个如此复杂的请求：-（Firefox（Gecko）不受支持，Internet Explorer不受支持，Safari不受支持。-@l'l在IE10中，并告诉我它不受支持。也许你应该，在投票否决支持它的人之前；）@Kolink：谢谢，它在IE10中确实有效，但浏览器兼容性是一项要求。尽管在您提供的flex wrap页面中使用了链接的各种属性，但至少在FF21中没有任何效果。即使会，我也希望有一个更通用的解决方案。我没想到这是一个如此复杂的要求：-（有趣的想法。我将尝试以此为基础，考虑每个可移动项目和容器元素的宽度，并计算当前宽度，以确定哪些项目仍然需要移到上一行。可能会很长，因为可能需要第三行。无论如何，感谢您的想法！有趣ng想法。我将尝试以此为基础，考虑每个可移动项目和容器元素的宽度，并计算当前宽度，以确定哪些项目仍然需要移到上一行。可能会很长，因为可能需要第三行。无论如何，感谢您的想法！