Помогите поправить

[f1est0 0]

Изображение

Помогите поправить. Я думаю проблема в CSS. Чтобы не было пропуска такого.

Почему-то когда четное количество новостей образуется такая проблема (картинка сверху).

Когда 2-е новости было, все нормально, 3-и тоже нормально, добавил 4-ую стало так криво, попробовал добавить 5-ую стало снова все хорошо.

<div class="viewn_news" style="width:338px; float:left; margin:8px; min-height:350px;"> 
	<div class="screen"><a href="{full-link}" title="{title}"><dt>{title}</dt><span></span><img src="{image-1}"></a></div> 
		<div class="info"><span>{category}</span> {date}</div>
			<div class="title"><a href="{full-link}" title="{title}">{title}</a></div>
			<div class="line"></div> 
		<div class="text">{short-story limit="400"}...</div> 
	<a href="{full-link}" class="button">Читать далее</a>  <div class="reads">Просмотров: {views}</div>
</div>

.viewn_news {overflow:hidden;}
.viewn_news .screen {overflow:hidden; width:338px; height:156px; margin:0 0 10px 0;}
.viewn_news .screen img {width:338px; height:156px;}
.viewn_news .screen span {background:url("../images/viewn_news_screen.png") no-repeat 0 0; width:338px; height:156px; position:absolute;}
.viewn_news .screen span:hover {background:url("../images/viewn_news_screen_h.png") no-repeat 0 0; cursor:pointer;}
.viewn_news dt {overflow:hidden; background:url("../images/viewn_news_title.png") no-repeat 0 0; max-width:280px; height:30px; line-height:34px; padding:0 10px 0 15px; margin:10px 0 0 20px; position:absolute; color:#fff;}
.viewn_news .info {overflow:hidden; text-transform:uppercase; padding:0 0 3px 0;}
.viewn_news .info span {color:#dc9600;}
.viewn_news .title {text-transform:uppercase; font-size:18px;}
.viewn_news .title a:hover {color:#dc9600;}
.viewn_news .line {overflow:hidden; margin:5px 0 5px 0; height:1px; background:#dedede;}
.viewn_news .text {overflow:hidden; padding:0 0 10px 0;}
.viewn_news a.button {display:block; float:left; text-decoration:none; height:28px; line-height:32px; background:#2c3436; color:#fff; text-align:center; text-transform:uppercase; padding:0 10px; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.viewn_news a.button:hover {background:#e69e00; text-shadow:1px 1px #9e6d00;}
.viewn_news .reads {float:left; margin:0 0 0 10px; height:27px; line-height:28px; padding:0 10px 0 12px; background:url("../images/viewn_news_reads.png") no-repeat 0 0;}
ul li.cf, ul li.cf a {color:#fff;}

 

Изменено 7 декабря 2017 пользователем f1est0

[MSK 289]

Проблема в том, что блоки разной высоты.

Поставьте жестко высоту блока, а не min....

[radrigo 180]

Попробуте в "viewn_news" вместо "float:left;" добавить "display: inline-block; vertical-align: top;"

Изменено 9 января 2018 пользователем radrigo