Избегайте пробелов в вертикальных блоках сайта

Question

Я пытаюсь понять, как изменить небольшую вещь на веб-сайте, но я не могу понять, как это сделать. У меня есть сетка статей, организованная в двух столбцах, и я хотел бы, чтобы различные блоки были отделены, избегая пустое пространство, как на рисунке http://i.stack.imgur.com/tNCFd.png Но я не знаю, какие свойства я должен установить.

Answer 1

EDIT - осветленный ответ (на осветленной вопрос в комментариях)

Там это правило в родительской теме:

#content .post { margin-bottom: 12px; } 

Вы должны переопределить это правило в вашей детской теме и установить

#content > div.articolo .post { margin-bottom:0; } 

ОРИГИНАЛЬНЫЙ ОТВЕТ

Во-первых, I категорически против предположить, что вы не просто бросаете тяжелую библиотеку jQuery (т. кладка) в проекте, который может быть исправлен с помощью простого CSS.

Во-вторых, из кода в комментариях - что это:

#content div.articolo { display:inline-block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:48%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:48%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; } 

Вы должны изменить его к этому:

#content div.articolo { display:block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:50%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:50%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; } 

Обратите внимание только то, что я изменил были width (изменен до 50%), и я изменил display: inline-block на display: block

display: inline-block сохраняет пробелы (преобразует много в один) в м arkup, поэтому, если у вас есть место в вашей разметке после закрытия div, то есть display: inline-block, вы увидите пробел в своем браузере. Скорее всего, разработчик установил ширину в 48%, чтобы (плохо) учитывать тот факт, что после каждого блока статьи появилось пространство (потому что оно было display: inline-block), что означает, что каждый блок не может быть установлен на 50% (потому что 50% + 50% + пробел> 100%)

Answer 2

Попробуйте установить высоту каждого артикул на «авто» с подходящим краем. Вы все равно получите некоторое пространство ниже, где высота двух статей меньше, чем соответствующие статьи в другом столбце.

Посмотрите на столбцы позиции на http://www.ebuyer.com/ - это иллюстрирует эффект.

Answer 3

Довольно сложно сказать только из изображения. Если маржа находится в элементах html, вы можете попытаться установить margin и padding на 0px; если пробел находится в растровых изображениях, обрезайте их.