这是一个使用jQuery的简单方法.我知道有人提到需要一种CSS方式,但是如果有人想提到这个问题,这只是为了将来的参考.
获取LI项目的数量并将其除以行数,并将该值设置为column-count属性.
jQuery的
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
HTML
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
编辑:
相同的实现使用简单的javascript.
var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);
您需要设置UL的宽度,因为行数也将取决于宽度,即使在设置列计数之后.您也可以将其设置为100%,然后根据窗口大小更改行数.为了将行数限制为2,可能需要UL的固定宽度.