使用以下HTML,将列表显示为两列的最简单方法是什么?
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul>
所需显示:
A B C D E
该解决方案必须能够在Internet Explorer上运行。
利用css3列模块来支持您要寻找的内容。
CSS:
ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
不幸的是,要获得IE支持,您将需要一个涉及JavaScript和dom操作的代码解决方案。这意味着,只要列表内容发生更改,您就需要执行将列表重新排序为列并重新打印的操作。为了简洁起见,下面的解决方案使用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);
.columns{ float: left; position: relative; margin-right: 20px; }
编辑:
如下所述,这将对列进行如下排序:
A E B F C G D
而OP要求匹配以下内容的变体:
A B C D E F G
要完成变体,只需将代码更改为以下内容:
function updateColumns(){ column = 0; columnItems.each(function(idx, el){ if (column > columns.length){ column = 0; } $(columns.get(column)).append(el); column += 1; }); }