Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать элементы списка одной высоты в пределах каждой строки / 3 сообщений из 3, страница 1 из 1
25.11.2015, 19:22
    #39113518
eddin
eddin
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать элементы списка одной высоты в пределах каждой строки
Добрый день!
Есть такая страница
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!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{vertical-align:top}
			.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. Соответственно после этого и самый высокий элемент в строке может смениться.

Друзья, заранее спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2015, 18:17
    #39114301
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать элементы списка одной высоты в пределах каждой строки
идея такая, разбиваем все элементы на строки, ищем максимальную высоту блока в строке, устанавливаем найденное значение всем элементам в строке.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<script>
    
    var liGroups = [];
    $('li').each(function () {
        
        var currentLi = $(this);
        var currentHeight = currentLi.height();
        var currentTop = currentLi.position().top;
        var currentBottom = currentHeight + currentTop;
        if (!liGroups[currentBottom]) {
            liGroups[currentBottom] = new Array();
        }
        liGroups[currentBottom].push({ li: currentLi, h: currentHeight  });
    });
    console.log(liGroups);
    for (var group in liGroups) {
        var max = 0;
        var liRow = liGroups[group];
        for (var i = 0; i < liRow.length; i++) {
            max = Math.max(max, liRow[i].h);
        }
        for (var j = 0; j < liRow.length; j++) {
            liRow[j].li.height(max);
        }
    }


</script>


Значение высоты устанавливается, но с отображением придется поработать. При масштабе !== 100% группы могут определятся не очень корректно - тоже придется допилить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2015, 04:37
    #39114551
eddin
eddin
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать элементы списка одной высоты в пределах каждой строки
oaken , спасибо, буду разбираться!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать элементы списка одной высоты в пределах каждой строки / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 556ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445600]:
 0ms
get settings:
 10ms
get forum list:
 23ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 198ms
get topic data:
 14ms
get forum data:
 4ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 249ms
total:  556ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]