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

Question

[Андрей]

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

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

Вопрос: как получившийся в правой стороне промежуток в 40px лучше всего превратить в 20px?

Answer 1

[NiGHt_LEshiY]

Сделать у контейнера «padding: 0 0 0 20px». Если нужен ещё и отступ сверху-снизу, то «padding: 20px 0 20px 20px».

Answer 2

[relic]

еще можно использовать псевдокласс :nth-child:

div:nth-child(3n) { margin-right: 0; /* убираем отступ у каждого 3го элемента */ }

Comments

[Genome_X]

Не совсем кроссбраузерно будет. Не помню, но вроде бы IE8 не держит это свойство.

Answer 3

[avalak]

Не знаю пригодится ли вам, но для «резиновой» (min-width max-width) вёрстки можно сделать так.

Comments

[Wott]

только хотел сам написать — сделать везде по 10px

Answer 4

[lorndesign]

родителю margin-right: -20px? overflow:hidden?

Answer 5

[Садых Садыхов]

<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;
}

Думаю, это самый оптимальный вариант.

Comments

[Садых Садыхов]

Ай блин, вру.

.container {
	padding: 0;
}
.product-list {
	margin: 0 10px;
}
.product {
	margin: 0 10px;
}

[Садых Садыхов]

Тупанул я. Тогда только последний вариант, оптимальный и логический =)

Answer 6

[ServDev]

Зависит от верстки. Но я бы на последний в строке блок с продуктом повесил класс, к примеру .last, и а не го поставил бы

.last{padding-right:0;}

Comments

[Садых Садыхов]

Так, а если у нас таких рядов несколько? Придется настраивать CMS, чтобы после каждых 3 прописывал класс .last.

[ServDev]

ну так если их несколько, значит формируются они в каком то шаблоне и по каким то правилам разбиваются в строке и столбцы- не руками вы их же каждую строку пишите.
в чем сложность то добавить

<li class="item<?php if(($i-1)%3==0): ?> first<?php elseif($i%3==0): ?> last<?php endif; ?>">

nth-child — IE8 — как то не работает
а отрицательные отступы не совсем красиво делать(это как по мне)
лучше подправить шаблон и быть спокойным что нигде ничего не поползет.

[Садых Садыхов]

По каким правилам они могут разбиваться? Есть шаблон, есть количество, разбиваются до тех пор, пока место не закончится.

Answer 7

[Станислав Гамаюнов]

Обычно margin-right:-20px для родителя. Но раз у Вас родитель паддингом, просто уберите ему паддинг справа.

Answer 8

[Никита Склюев]

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

П.С. возможно я изложил немного сложно, прошу за это прощения, все же утро воскресенья, но в остальном все очень просто

Answer 9

[webmolot]

заменить padding-right на margin-right для контейнера и для блока товаров. Сработает «схлопывание полей»