ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не совпадает высота элементов списка (li)
9 сообщений из 9, страница 1 из 1
Не совпадает высота элементов списка (li)
    #39298724
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет.

В примере ниже - 2 элемента списка, расположенные в строчку.
Их содержимое формируется динамически.
Как сделать, чтобы при любом содержимом у них была равная высота?

Указание фиксированной высоты не канает, т.к. при изменении разрешения экрана происходят трансформации и высота может меняться, в зависимости от этого разрешения.

Заранее спасибо!

Код: 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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<!DOCTYPE HTML >
<html lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Тест</title>	
	<style>
		* 
		{
			margin: 0;
			padding: 0;
		}
		.inline
		{
			display: table;
			list-style: none;
			border: 3px solid green;			
		}
		.inline li
		{
			float: left;
			width: 200px;			
			border: 2px solid red;
		}
	</style>
</head>
<body>		
	<ul class="inline">
		<li>
			aaa<br>
			aaa<br>
			aaa<br>
			aaa
		</li>
		<li>
			bbb<br>
			bbb
		</li>
	</ul>	
</body>
</html>
...
Рейтинг: 0 / 0
26.08.2016, 16:36
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39298737
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayКак сделать, чтобы при любом содержимом у них была равная высота?
Это не список. Так ведет себя таблица из одной строки и нескольких колонок...
Код: 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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
.inline {
	display: table;
	list-style: none;
	border: 3px solid green;			
}
.inline li {
	display: table-cell;
	width: 200px;			
	border: 2px solid red;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul class="inline">
	<li>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa
	</li>
	<li>
		bbb<br>
		bbb
	</li>
</ul>	
</body>
</html>
...
Рейтинг: 0 / 0
26.08.2016, 16:46
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39298861
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Гениально!
Спасибо большое!

krvsa ,
я смотрю, в основном на мои вопросы ты отвечаешь :)
Не против, если я на "ты" буду?

PS: учусь верстать дивами и делать адаптивную верстку после пяти с лишним лет верстки таблицами.
Тяжело перепривыкать ... но куда деваться ;)
...
Рейтинг: 0 / 0
26.08.2016, 22:01
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39298885
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Вообще, это решение не прокатило!
Хотя мой косяк в том, что я не до конца объяснил условия задачи.

При уменьшении разрешения экрана в случае с float-left правый элемент "прыгнет" под левый, а в случае с display: table-cell - он сужается до минимума. А мне нужен как раз первый вариант...
...
Рейтинг: 0 / 0
27.08.2016, 00:01
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39299201
уточняющий вопрос
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
уточняющий вопрос
Гость
urukhay,

браузеры какие будут? Может flex использовать?
...
Рейтинг: 0 / 0
28.08.2016, 17:20
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39299278
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
urukhay,

Мне кажется, что Ваша задача сводится к нахождению наибольшей допустимой высоты одного из блоков.
Если высота будет больше допустимой, то нужно работать со свойством overflow или искать другие пути обрезки видимого содержимого.
...
Рейтинг: 0 / 0
29.08.2016, 01:15
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39299318
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayНе против, если я на "ты" буду?
Мы не совещании, т.ч. нет проблем.
...
Рейтинг: 0 / 0
29.08.2016, 08:17
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39299319
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
уточняющий вопросМожет flex использовать?
Флекс бокс умеет растягивать на высоту материнского контейнера. Может переносить "построчно"...
Но основой там служит не внутренний контент, а именно размеры материнского контейнера.
...
Рейтинг: 0 / 0
29.08.2016, 08:19
| Ответить | Цитировать | Написать  
Не совпадает высота элементов списка (li)
    #39299364
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот пример с флексбокс...

 
Код: 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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
.inline {
	max-width: 608px;			
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	list-style: none;
	border: 3px solid green;			
}
.inline li {
	width: 300px;			
	border: 2px solid red;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul class="inline">
	<li>
		aaa<br>
		aaa<br>
		aaa<br>
		aaa
	</li>
	<li>
		bbb<br>
		bbb
	</li>
</ul>	
</body>
</html>


Но если не задавать размеры материнского блока - в много строчном режиме все определяется высотой самого контента...
...
Рейтинг: 0 / 0
29.08.2016, 09:53
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не совпадает высота элементов списка (li)
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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