0

我有一个包含未知数量的项目的列表。有没有办法使用 jquery 或 javascript 将列表拆分为列？棘手的部分：列数也是动态的，因此当浏览器更改它时，列数会更改为。您可以将其与浮点数进行比较。所以当你让你的浏览器变小时，浮动的 div 将浮动做底部。（如果你没有设置宽度）我可以说计算项目的数量并将它们放在列中，然后浮动 ul 列表。但是你有一个问题，最后一列将放在第一列之下。但我想要第一列下的“第二”列。

例如：

<ul>
   <li>test1</li>
   <li>test2</li>
   <li>test2</li>
   <li>test4</li>
   <li>test5</li>
   <li>test6</li>
</ul>

如果我做一个浮动，你会得到这个：

测试1 测试2 测试3 测试4 测试5 测试6

当浏览器变小时，你有这个：test1 test2 test3 test4 test5 test6

它应该是：
test1 test3 test4 test5 test6 test2

（这是当你使用浮动时）所以有没有办法改变浮动顺序，或者只是用jquery来动态地制作列？

我找到了这个解决方案，但它仍然无法像我想要的那样工作。它是 jquery 插件：columnizeList。该列表显示在几列中，但我仍然遇到这个问题：当我加载页面时，例如我的 div 中有这个列表：

在此处输入图像描述

（所以这和以前的问题一样）。我仍然使用浮动，所以也许这就是问题所在。但是我可以在没有浮动的情况下解决这个问题吗？

4

2 回答 2

0

这就是浮动的工作原理，如果您希望项目显示在彼此下方，您可以包装其中一些，然后浮动它们的包装：

<ul>
   <div>
     <li>test1</li>
     <li>test2</li>
     <li>test2</li>
     <li>test4</li>
     <li>test5</li>
   </div>
   <div>
     <li>test6</li>         
     <li>test7</li>         
     <li>test8</li>
   </div>
</ul>


ul div {
   float: left
}

http://jsfiddle.net/f8Kgj/

于 2012-06-18T09:43:47.387 回答
0

我建议您使用 CSS:display: flex并使用它。您还可以使用Bootstrap - Flex来简化更改。

flex 最好的一点是你可以简单地通过在样式表中键入来重新排序元素order: 1，如果你使用 Bootstrap，你可以简单地将.order-1类放在第一个元素上。

.order-lg-1您还可以使用 Bootstrap 使用类根据屏幕宽度重新排序。

于 2018-04-13T04:42:40.067 回答