Question

所以目前我已经水平订购了A-Z，但我的最终游戏是垂直排列。

我将解释代码目前的工作原理。

所以它是a中包含的div标签的集合，其固定宽度为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的最佳方法是什么。

Answer 1

很难说不知道如何生成标记（例如来自像WordPress这样的CMS？静态HTML？）。

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

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

在PHP / WordPress中，计算列表中的链接数（比如说40），你想要的列数（比如说六个），以及除/ mod来知道每个列中的链接数（六列中的六列和一列）四个）。在许多元素周围输出标签并将它们向左浮动。
你可以对JS做同样的事情，但你会受到FOUC（无格式内容的闪现）和可能的性能问题的影响。

希望任何有用的东西！如果不相关，请道歉 - 我们没有从您的问题中获得太多帮助。

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

1 个答案: