Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HELP! Дивы в ряд и абсолютное позиционирование / 9 сообщений из 9, страница 1 из 1
24.02.2022, 23:48
    #40136315
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
Всем привет! Помогите заверстать следующую задачу.

1. Две строки, расположенные друг под другом (.row).
2. В каждой строке - по 2 блока, расположенные в ряд (.inline).
3. Внутри каждого блока - слой с абсолютным позиционированием относительно родителя (.absolute).

Я наверстал такое:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<div class="row">
  <div class="inline">
    <div class="absolute"></div>
  </div>
  <div class="inline">
    <div class="absolute"></div>
  </div>
</div>
<div class="row">
  <div class="inline">
    <div class="absolute"></div>
  </div>
  <div class="inline">
    <div class="absolute"></div>
  </div>
</div>



И стили:

Код: css
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.
.row
{
  width: 450px; 
  overflow: hidden;  
  margin-bottom: 20px;
}
.inline
{
  position: relative;
  float: left;  
  width: 200px; 
  height: 40px; 
  border: 1px solid black; 
  margin-right: 20px;
}
.absolute
{
  position: absolute; 
  z-index: 10; 
  top: 40px; 
  left: 0; 
  width: 200px; 
  height: 300px; 
  border: 1px solid red;
}



В результате, слой с абсолютным позиционированием обрезается по вертикали, т.к. .row стоит стиль overflow: hidden.
А если его убрать, перестает работать margin-bottom: 20px - строки "прилипают" друг к другу.

Как решить сию проблему?
Заранее благодарю!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2022, 11:38
    #40136370
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
urukhay , расскажи зачем ты делал
Код: css
1.
2.
3.
.inline {
  float: left;  
}


Какую цель этим преследовал?

Аааа... Там два дива, понял.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2022, 11:43
    #40136376
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
urukhay , без
Код: css
1.
2.
3.
.inline {
  float: left;  
}


Код: 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.
46.
47.
48.
49.
50.
51.
52.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.row {
	display: flex;
	width: 450px; 
	margin-bottom: 20px;
}
.inline {
	position: relative;
	width: 200px; 
	height: 40px; 
	border: 1px solid black; 
	margin-right: 20px;
}
.absolute {
	position: absolute; 
	z-index: 10; 
	top: 40px; 
	left: 0; 
	width: 200px; 
	height: 300px; 
	border: 1px solid red;
}
</style>
<script>
</script>
</head>
<body>
<div class="row">
	<div class="inline">
		<div class="absolute"></div>
	</div>
	<div class="inline">
		<div class="absolute"></div>
	</div>
</div>
<div class="row">
	<div class="inline">
		<div class="absolute"></div>
	</div>
	<div class="inline">
		<div class="absolute"></div>
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.02.2022, 23:27
    #40136554
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
Спасибо большое, вроде работает!
Я знал про flex, но лет 5 (а может и больше) лет назад, я пытался ее использовать, но один из браузеров ее не поддерживал.
Если не изменяет память, это был ИЕ.

Возможно, за это время добавили поддержку flex в ИЕ.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.02.2022, 11:29
    #40136579
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
urukhay , ранее делались предупреждения что flex будет работать на "маленьких" и "не сложных" элементах. Делались предостережения не использовать flex в качестве "рамы" для приложений.

С тех пор все изменилось. Теперь flex можно использовать и в хвост и в гриву, это теперь обкаканная практика.
Правда есть еще grid, это еще одна альтернативная технология для составления рамы приложений.
https://habr.com/ru/company/macloud/blog/564182/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.02.2022, 12:06
    #40136583
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
urukhay

Возможно, за это время добавили поддержку flex в ИЕ.


И не надейтесь. Мертвым припарки не ставят.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.02.2022, 22:03
    #40136804
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
автор https://habr.com/ru/company/macloud/blog/564182/
Спасибо, почитаю.

А какой инструмент более "гибкий": flex или grid?
Или как обычно, везде есть свои плюсы и минусы и все зависит от задачи?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.02.2022, 22:45
    #40136808
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
urukhay , они оба вполне работоспособны и обкатаны на практике.
Т.ч. как и когда это все применять - уже дело разработчика.

Например в react-native все вообще работает только на flex.

Я достаточно давно работаю с блочной версткой и мне ее вполне хватает в разработке. Все эти "нововведения" только дополнили мои возможности.
Твоя ситуация это могла продемонстрировать. Т.к. ты все практически уже сделал сам, а flex лишь немного тебе помог осуществить специфическую надобность по внешнему представлению элементов.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.03.2022, 18:23
    #40136937
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HELP! Дивы в ряд и абсолютное позиционирование
Все ясно.
Спасибо за помощь!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HELP! Дивы в ряд и абсолютное позиционирование / 9 сообщений из 9, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 376ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443119]:
 0ms
get settings:
 9ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 30ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 251ms
total:  376ms
x
x
Закрыть


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