对 div A-Z 中的子元素进行垂直排序答案

【问题标题】：Sorting child elements within a div A-Z vertically对 div A-Z 中的子元素进行垂直排序
【发布时间】：2014-05-11 13:54:33
【问题描述】：

This is how it currently looks

所以目前我让它水平排列 A-Z，但我的最终目标是让它垂直排列。

我将解释代码当前是如何工作的。

所以它是包含在div 中的a 标签的集合，其宽度固定为700px，内容向左浮动。在父链接上启用了onclick 功能，单击该功能时会运行以下内容：

onclick="
        if($('#random-word01').css('display') != 'block'){ 
           closeOpennedIndustry()
        }; 
        $( '#random-word1' ).slideToggle(200); 
        $( '#toggleRandomWord h3.h3-random-word' ).toggle()"

启用下拉菜单。

我认为改变这种情况的最佳方法是将 div 置于无序列表中，并将它们全部向左浮动而不是水平浮动。但是，我遇到了下拉菜单的定位问题。

实现链接 A-Z 与下拉菜单工作 A-Z 并在正确位置的最佳方法是什么。

【问题讨论】：

您必须发布有问题的相关代码。顺便说一句，提供 jsFiddle 会促使人们尝试帮助您
没有相关代码，无法准确回答，但据我所知，CSS列显示可能是一个解决方案。

标签： javascript jquery html css

【解决方案1】：

如果不知道标记是如何生成的（例如来自 WordPress 之类的 CMS？静态 HTML？），很难判断。

CSS Columns 可以帮助您使列表垂直而不是水平运行（并优雅地降级为水平）。使用Modernizr 检测列，和/或使用IE Conditional Tags 为这两种情况编写样式。

如果您想要精确的跨浏览器兼容性，您还可以将列包装在 UL 中并使用 clearfixes 浮动它们。

在 PHP/WordPress 中，计算列表中的链接数（例如 40）、您想要的列数（例如六），然后除法/修改以了解每列有多少（六列六和一列四）。围绕这么多元素输出标签并将它们向左浮动。
您可以对 JS 执行相同的操作，但您会受到 FOUC（无样式内容的闪存）的影响，并且可能会出现性能问题。

希望对您有所帮助！如果不相关，请致歉——我们没有从您的问题中得到太多帮助。

祝你好运！

【讨论】：