Question

Добрый день. Подскажите, пожалуйста, как можно выровнить материалы, расположенные в три колонки, на главной странице каталога статей, по всей длине блока?

Код вида материалов у меня такой:

<div style="width:32.0%;float:left;margin: 0px 10px 0px 0px;">
<div class="article-vertical col4 post-53 post type-post status-publish format-standard has-post-thumbnail hentry category-fashion category-reviews category-travel tag-incorrupte tag-nostrud-accusam tag-voluptatum-et">
<div class="post-image">
<div style="overflow: hidden;height:238px;">
<img class="image-border" src="$IMG_URL1$" alt="" title="$TITLE$" width="425" height="364" style="min-height:238px;min-width:150%;"/>
</div>
 
<ol class="social-links">
<li><a href="$ENTRY_URL$"><i class="icon-link"></i></a></li>
<li><a href="$IMG_URL1$" rel="lightbox"><i class="icon-search"></i></a></li>
</ol>
 
</div>
 
<div class="entry-content">
<h2 class="entry-title"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<div class="entry-meta">
<div class="description-em">
<span class="by-view-number">$READS$</span>
<span class="by-date">$DATE$</span>
<span class="by-comments"><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></span>
</div>
</div>
<p><?if(len($MESSAGE$)>10)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></p>
<a href="$ENTRY_URL$" class="read-more">Читать дальше</a>
</div>
</div>
</div>

Если делаю отступы между колонками шире, правая колонка съезжает вниз.

Answer 1

регулируй эти цифры:
<div style="width:32.0%;float:left;margin: 0px 10px 0px 0px;">

width:32.0%;  - это ширина блока
margin: 0px 10px 0px 0px;  - это отступы вокруг блока, но когда ты их увеличиваешь, автоматически увеличивается и width, поэтому это нужно учитывать...

вот смотри каждый блок у тебя по 32% это получается 32*3 = width:96% общее. потом ты пишешь отступ справа используя margin: 0px 10px 0px 0px; поэтому тебе нужно уменьшать либо отступ справа, либо ширину блоков

Comments

Пробовала "играться" и с шириной блока и с отступом. Дело в том, что отступ распространяется на все три блока, то есть отступ от первой колонки вправо 10 px, от второй колонки - 10 px и от третьей колонки вправо тоже получается 10 px. Я не знаю как сделать, чтобы от третьей колонки вправо отступа не было.

 

Решила проблему данным кодом:

<div style="margin-right:-17px;">
$BODY$
</div>