вопрос
Можно ли как сделать адаптацию с помощью css?
При смене разрешения на более меньшее, вторая колонка смещается в низ: Вот так должно быть: Вот css код:
При смене разрешения на более меньшее, вторая колонка смещается в низ: Вот так должно быть: Вот css код:
.short_video_block{Вот html:
height: 180px;
background: #FFF;
float: left;
margin-right: 15px;
margin-bottom: 24.6px;
}
.short_video_block:nth-child(2n){
margin-right: 0px;
}
.prev_short_video{
width: 360px;
position: relative;
height: 150px;
overflow: hidden;
box-shadow: 0 0 5px;
border: 1px solid #FFFFFF;
margin: 14px 10px 7px 0;
}
.prev_short_video img{
width: 360px;
min-height: 150px;
}
.title_short_video{
width: 340px;
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 13px;
font-weight: 600;
font-style: normal;
color: #4D556E;
}
.short_video_block:hover > a > .title_short_video{
cursor: pointer;
text-decoration: underline;
color: #313746;
}
.prev_short_video:before{
position: absolute;
width: 360px;
height: 150px;
top: 0;
left: 0;
background: rgba(255,255,255,.2);
content: '';
}
.short_video_block:hover > a > .prev_short_video:before{
opacity: 0.2;
}
<div class="short_video_block">
<a href="{full-link}">
<div class="prev_short_video">
<img src="[xfvalue_screen_video]" alt="{title}">
</div>
<div class="title_short_video">
{title limit="50"}
</div>
</a>
</div>