Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Не совпадает высота элементов списка (li) / 9 сообщений из 9, страница 1 из 1
26.08.2016, 16:36
    #39298724
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не совпадает высота элементов списка (li)
Всем привет.

В примере ниже - 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:46
    #39298737
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не совпадает высота элементов списка (li)
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, 22:01
    #39298861
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Не совпадает высота элементов списка (li)
Гениально!
Спасибо большое!

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

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

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

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

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

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


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