在(受支持的)CSS 中似乎没有简单的方法来做到这一点。我正在寻找一个JavaScript解决方案,最好是jQuery。
我有一个这样的无序列表:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
...etc
</ul>
我希望每个列有一个高度,例如四个项目,并且垂直填充,而不是像CSS浮动一样水平排列:
A E
B F
C
D
在(受支持的)CSS 中似乎没有简单的方法来做到这一点。我正在寻找一个JavaScript解决方案,最好是jQuery。
我有一个这样的无序列表:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
...etc
</ul>
我希望每个列有一个高度,例如四个项目,并且垂直填充,而不是像CSS浮动一样水平排列:
A E
B F
C
D
ul
更具体的选择器,最好使用id
。
jQuery(function ($) {
var size = 4,
$ul = $("ul"),
$lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
loop = Math.ceil($lis.length / size),
i = 0;
$ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");
for (; i < loop; i = i + 1) {
$ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + size)).insertAfter($ul);
}
});
看这篇文章:
“最佳”解决方案是主观的,但我倾向于使用任意类。XHTML和CSS的一个小圣杯之一是产生一个单一的、语义逻辑有序的列表,可以包裹成垂直列。
我提前警告你。如果你想在多列中呈现列表,你必须做出妥协。你可以牺牲W3C网络标准并使用过时的标记,你可以接受不那么语义逻辑的标记,你可以容忍内容与表现的混合,你可以放弃浏览器兼容性,或者你可以使用带有属性且样式规则繁重的标记。每条路都要付出代价。
var col_max_height = 6; //Max Items per column
var col_width = 200; //Pixels
var col_height = 33; //Pixels
$('.header ul li ul').each(function() {
$(this).find('li').each(function(index){
column = parseInt(index/col_max_height);
$(this).css('margin-left', column * col_width + 'px')
if(column > 0) {
$(this).css('margin-top', (index - (col_max_height * column) + 1) * -col_height + 'px').addClass('col_'+column);
}
});
});
var col_max_item = 2; //Max Items per column
var col_width = $('.header ul li').css('width').replace("px", ""); //Pixels, get width from CSS
var col_height = $('.header ul li').css('height').replace("px", ""); //Pixels, get height from CSS
$('.header ul').each(function() {
$(this).find('li').each(function(index){
column = parseInt(index/col_max_item);
$(this).css('margin-left', column * col_width + 'px')
if(column > 0 && (index / col_max_item) == column) {
$(this).css('margin-top', (col_max_item * col_height * -1) + 'px').addClass('col_'+column);
}
});
});
只需要稍微不同的移动,下一列就会向上移动,而不是每个li。
var col_max_height = 6; //Max Items per column
var col_width = 120; //Pixels
var prevCol = 0;
$('.header ul').each(function() {
$(this).find('li').each(function(index){
column = parseInt(index/col_max_height);
$(this).css('margin-left', column * col_width + 'px')
if(prevCol != column) {
$(this).css('margin-top', '-92px').addClass('col_'+column);
prevCol = column;
} else {
$(this).css('margin-top', '0px').addClass('col_'+column);
}
});
});
$('.mylist').cols(2);
这里有一个在jsfiddle上的实时示例
ul
?在我看来,如果你有行和列,那就是表格内容,你需要一个表格。 - Jesse Dhillon