Dr_Elvis
@Dr_Elvis
В гугле забанен

Как сделать перекрытие элементов в зависимости от ширины блока?

На JS генерируются блоки, которые нужно вместить в ширину родителя так, чтобы сами блоки оставались того же размера равномерно перекрывая друг друга. причем если блоков, к примеру, три, то расположить их рядом по центру. У меня они для того чтобы вместиться изменяют свою ширину, либо выходят за рамки, если поставить min-width. Это похоже на колоду карт в руке, только горизонтально.
https://codepen.io/Dr_Elvis/pen/VwXBPqq
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
@cssfish
Плохое знание основ - причина больших бед
общий принцип:
1) обертки карт делаем нулевой ширины, сами карты внутри центрируем
2) обертка для всех карт - паддинги по бокам на пол-карты, flex + space-between

все, вложится идеально. если border и прочее то box-sizing по вкусу.
сделал пример, вместо обертки карт использовал сами карты как обертки, псево внутри для отображения карты.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	
	<style>
		.cards {
			width: 60%;
			border: 2px solid red;
			margin: 10px auto;
			
			display: flex;
			justify-content: space-between;
			padding: 0 45px;
		}
		.card {
			flex-shrink: 0;
			
			position: relative;
			width: 0;
			height: 126px;
			transition: 0.3s;
			cursor: pointer;		
		}
		.card:before {
			content: "";
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: -45px;
			width: 90px;
			height: 100%;
			background-color: blue;
			border-style: inset;
			border-radius: 10px;		
		}
		.card:hover{
			transform: translate(0, -20px);
		}	
	
	</style>
</head>
<body>
	
	<div class="cards">
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
	</div>

	<div class="cards">
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
	</div>
	
	
</body>
</html>


upd:
правда, центрирования не будет )

С центрированием будет, если:
  • space-evenly
  • width: 90 для карточек и отриц отступы
  • margin: auto для всех карточек или крайних только

но все эти решения дают плавающие боковые промежутки :(
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы