Задачка по html-верстке. Как ее решить?



У контейнера выставлен padding: 20px (красный)

У блоков с товаром выставлен padding-right: 20px (зеленые) для того чтобы между блоками был отступ. Сами они стоят друг за другом благодаря float: left

Вопрос: как получившийся в правой стороне промежуток в 40px лучше всего превратить в 20px?
  • Вопрос задан
  • 3155 просмотров
Пригласить эксперта
Ответы на вопрос 9
@NiGHt_LEshiY
Сделать у контейнера «padding: 0 0 0 20px». Если нужен ещё и отступ сверху-снизу, то «padding: 20px 0 20px 20px».
Ответ написан
@relic
еще можно использовать псевдокласс :nth-child:

div:nth-child(3n) { margin-right: 0; /* убираем отступ у каждого 3го элемента */ }
Ответ написан
avalak
@avalak
Не знаю пригодится ли вам, но для «резиновой» (min-width max-width) вёрстки можно сделать так.
Ответ написан
<div class="container">
	<div class="product-list">
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
	</div>
</div>


У .container выставляете что хотите (например с обеих сторон по 20px), но тогда у .product-list {padding: 0 -20px 0 0}.
Но я часто прописываю у container только одну сторону, дабы таких ошибок не было.

Либо другой вариант. Верстка та же, стили такие:
.container {
	padding: 0 20px;
}
.product-list {
	margin: 0 10px;
}
.product {
	margin: 0 10px;
	float: left;
}

Думаю, это самый оптимальный вариант.
Ответ написан
ServDev
@ServDev
Зависит от верстки. Но я бы на последний в строке блок с продуктом повесил класс, к примеру .last, и а не го поставил бы

.last{padding-right:0;}
Ответ написан
happyproff
@happyproff
Счастливый веб-разработчик
Обычно margin-right:-20px для родителя. Но раз у Вас родитель паддингом, просто уберите ему паддинг справа.
Ответ написан
Если без заморочек, то каждую строку с блоками (по 3 блока в строке у вас получится) обернуть в отдельный блок, далее вам необходимо заменить padding-right на padding-left, далее например у каждого из блоков этих у вас есть класс .flower, то в CSS просто добавляете .flower:first-child{padding-left:0px;}
Это самый простой и самый действенный способ, сам часто им пользуюсь.

П.С. возможно я изложил немного сложно, прошу за это прощения, все же утро воскресенья, но в остальном все очень просто
Ответ написан
@webmolot
заменить padding-right на margin-right для контейнера и для блока товаров. Сработает «схлопывание полей»
Ответ написан
Ваш ответ на вопрос

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

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