Если ставлю фиксированную высоту в CSS то высота блока новости нормальная. Но когда ставлю высоту height: auto, то высота блока новости уменьшается. Нужно чтобы каждая новость отображала разную высоту картинки, и блок с текстом отображался полностью.
#inews {
width: 100%;
margin: 0 auto;
}
.newsbox {
width:23.6%;
margin: 10px 0.7%;
float:left;
background-color:#FFF;
box-shadow: 0 0 3px 2px rgba(0,0,0,.35);
}
.news-title {
width:100%;
display: inline-block;
outline: none;
position: relative;
color:#FFF;
letter-spacing: 0px;
font-size:15px;
text-align:center;
font-weight:600;
padding:8px;
}
.news-title a {
color: #FFF;
text-decoration:none;
}
.news-title a:hover {
}
.news-preview {
width:100%;
margin:0;
background-color:#DEDEDE;
display:inline-block;
position:relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.news-preview a, .news-preview a:hover {
color:#FFF;
text-decoration:none;
}
.news-image{
display: block;
height: auto;
width: 100%;
}
.news-preview .news-info-top {
display:block;
position:absolute;
left:0;
top:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color:#fff;
font-size:11px;
background-color:rgba(0,0,0,.5);
}
.news-preview .news-info {
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
color:#fff;
font-size:11px;
background-color:rgba(0,0,0,.5);
}
.news-text{
text-justify:auto;
color:#000;
font-size:0.8em;
padding: 7px;
}
<div class="newsbox">
<div class="news-preview"> <img src="https://m1.behance.net/rendition/projects/4806803/orig/6ac32f989b3aadd68ed6162b8112fd5f.jpg" class="news-image" />
<div class="news-info-top">
<div class="news-info-left"> <span class="news-icon icon-date"></span> <span>{date}</span> </div>
<div class="news-info-right"> <span>{link-category}</span> <span class="news-icon icon-category"></span> </div>
[full-link]<div class="news-title">{title}</div>[/full-link]
</div>
<div class="news-info">
<div class="news-info-left"> <span class="news-icon icon-views"></span> <span>переглядів:<b>{views}</b></span> </div>
<div class="news-info-right"> [com-link]<span>коментарів:<b>{comments-num}</b></span>[/com-link] <span class="news-icon icon-comments"></span> </div>
</div>
</div>
<div class="news-text">{short-story}</div>
<div class="news-stripe">
[full-link]<button class="news-button">детальніше</button>[/full-link]
</div>
</div>
💬 Комментарии
В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.
🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.
💡 Хотите обсудить материал?
Присоединяйтесь к нашему Telegram-каналу:
https://t.me/blogssmartzНажмите кнопку ниже — и вы сразу попадёте в чат с комментариями