ReSQL.ru
     
powered by simpleCommunicator - 2.0.29     © 2024 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Map
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HELP! Дивы в ряд и абсолютное позиционирование
9 сообщений из 9, страница 1 из 1
HELP! Дивы в ряд и абсолютное позиционирование
    #40136315
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет! Помогите заверстать следующую задачу.

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
24.02.2022, 23:48
| Ответить | Цитировать | Написать  
HELP! Дивы в ряд и абсолютное позиционирование
    #40136370
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhay , расскажи зачем ты делал
Код: css
1.
2.
3.
.inline {
  float: left;  
}


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

Аааа... Там два дива, понял.
...
Рейтинг: 0 / 0
25.02.2022, 11:38
| Ответить | Цитировать | Написать  
HELP! Дивы в ряд и абсолютное позиционирование
    #40136376
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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
25.02.2022, 11:43
| Ответить | Цитировать | Написать  
HELP! Дивы в ряд и абсолютное позиционирование
    #40136554
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо большое, вроде работает!
Я знал про flex, но лет 5 (а может и больше) лет назад, я пытался ее использовать, но один из браузеров ее не поддерживал.
Если не изменяет память, это был ИЕ.

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

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

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


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

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

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

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


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