本问题探讨了跨两列呈现无序列表的方法,特别是用于显示在 Internet Explorer 等旧版浏览器中。
在现代浏览器中,CSS3 columns 模块提供对创建列的支持。通过利用此模块,您可以实现所需的布局,如下所示:
ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
对于旧版浏览器,当内容发生更改时,需要一个涉及 DOM 操作的基于 JavaScript 的解决方案。该解决方案使用 jQuery简洁:
HTML:
<div> <ul class="columns" data-columns="2"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> </ul> </div>
JavaScript:
(function($){ var initialContainer = $('.columns'), columnItems = $('.columns li'), columns = null, column = 1; // account for initial column function updateColumns(){ column = 0; columnItems.each(function(idx, el){ if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){ column += 1; } $(columns.get(column)).append(el); }); } function setupColumns(){ columnItems.detach(); while (column++ < initialContainer.data('columns')){ initialContainer.clone().insertBefore(initialContainer); column++; } columns = $('.columns'); } $(function(){ setupColumns(); updateColumns(); }); })(jQuery);
CSS:
.columns{ float: left; position: relative; margin-right: 20px; }
注意:
最初,此解决方案将对列进行如下排序:
A E B F C G D
原始问题要求这样的排序:
A B C D E F G
对于此变体,调整以下 JavaScript 代码:
function updateColumns(){ column = 0; columnItems.each(function(idx, el){ if (column > columns.length){ column = 0; } $(columns.get(column)).append(el); column += 1; }); }
以上是如何在现代和传统浏览器中以两列显示无序列表?的详细内容。更多信息请关注PHP中文网其他相关文章!