Лучший способ:
<!doctype html>
<head><title></title></head>
<style type="text/css">
ul {
width: 300px;
}
li {
width: 75px;
margin: 10px;
display: inline-block;
}
</style>
<body>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
</html>
Решение состоит в том, чтобы использовать inline-block и позволить браузеру определить правильную высоту для ul.Если вы не можете использовать inline-block, поскольку вам нужна поддержка старых браузеров, дайте мне знать, и мы пойдем дальше.
Решение jQuery:
<!doctype html>
<head><title></title></head>
<style type="text/css">
ul {
width: 300px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="application/javascript"></script>
<script type="application/javascript">
$(document).ready(function() {
var numitems = $("#my_grid li").length;
var numrows = Math.ceil(numitems / 3);
var myheight = (numrows * 75) + (numrows * 10);
$("ul#my_grid").height(myheight);
});
</script>
<body>
<ul id="my_grid">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
</html>
Обратите внимание, что вам нужно найти потолок для чисел, иначе ваш рост не будет достаточно большим, например, если у вас 10 элементов.
Решение jQuery поставляется с огромным предостережением : Это сработает только в том случае, если вы точно знаете, насколько высоким будет каждый ли.Если в какой-то момент вы решите, что вам нужно определить размер динамически (например, в ответе Пётровица), вам нужно быть осторожным, чтобы убедиться, что ваша функция не выполняется до тех пор, пока не будут загружены все таблицы стилей, чтобы окончательный размер вашегоэлемент может быть определен.В противном случае JavaScript может определить высоту элемента до применения всех стилей, и вы получите странные результаты.По этой причине я настоятельно рекомендую браузеру и CSS по возможности выполнять все обязанности по макету.