Сделать элементы списка одной высоты в пределах каждой строки
Добрый день!
Есть такая страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
body{font-size:16px}
#wrap{max-width:400px;text-align:center;border:2px solid red}
.list li{display:inline-block;vertical-align:bottom;width:100px;text-align:left;}
.list li a{display:block;margin:5px;border:1px solid green}
</style>
</head>
<body>
<div id="wrap">
` <ul class="list">
<li><a href="#">111111 111111 1 1 1 1</a></li>
<li><a href="#">22 2222 2 2 2</a></li>
<li><a href="#">333 3 3 3 3 33 3 3 33333 3 3 3 3 3 3 3 3 3</a></li>
<li><a href="#">4444444444 4444444 444 4 4 4444444444 4 44 4 4 44</a></li>
<li><a href="#">5555 555</a></li>
<li><a href="#">66 6666 6666 6 6 6 666 66 66 6 6 6 6 6 6 66666 66666 666 6</a></li>
<li><a href="#">7777 7777777 7777 777777 777</a></li>
</ul>
</div>
</body>
</html>
По условию на странице нельзя использовать таблицы html, display:table, и float (это важно!).
Как кроссбраузерно (IE6 и 7 не нужны) с помощью чистого JS или Jquery (Jquery предпочтительней, тк библиотека подключена) сделать так, чтобы высота элементов списка подгонялась под высоту самого высоко в строке?
Я знаю, как сделать все элементы списка одной высоты, выровняв их по самому высокому в списке. Но мне надо, чтобы это работало отдельно для каждой строки. Количество строк может быть любым, ширина #wrap тоже любым, как и количество элементов в строке. Например, в данном примере, при увеличении масштаба страницы, #wrap начнет сужаться, а количество элементов в строке уменьшится с 3 до 2. Соответственно после этого и самый высокий элемент в строке может смениться.
Друзья, заранее спасибо! |
