как будет правильным сделать так по колонкам ?
-
1колонки самые обычные, просто в правых padding-top добавляете– humster_spb26 апр 2021 в 11:45
-
новости генерируются ), то есть добавляются в админке и выводится должны в таком порядке )– vencs26 апр 2021 в 11:48
-
1данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)– aleksandr barakin26 апр 2021 в 20:33
-
vencs, если вы задаете вопрос, и получаете ответы, то будьте добры, выбирать для себя полезный ответ и отмечать его галочкой как решенный. Иначе, в дальнейшем вас будут просто игнорировать.– Sevastopol'6 мая 2021 в 11:38
Добавить комментарий
|
1 ответ
Для чётных колонок просто добавляете дополнительный padding-top
(а на определённом брейкпоинте, когда новости выстраиваются в одну колонку, убираете его).
В моём примере клик на кнопку имитирует вывод новостей из базы. Покликайте и посмотрите - ничего сложного:
let news = '<div class="col-sm-6 news-item-col"><div class="news-item">Новость</div></div>';
$('button').click(function(){
$('.news-wrap').append(news);
})
.news-item {
background-color: #000;
color: white;
padding: 30px;
height: 200px;
}
.news-item-col {
padding: 15px;
}
.news-item-col:nth-of-type(even) {
padding-top: 80px;
}
@media (max-width: 575px) {
.news-item-col:nth-of-type(even) {
padding-top: 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<button>Добавить новость</button>
<div class="container-xl">
<div class="row news-wrap"></div>
</div>