0

введите сюда описание изображения

как будет правильным сделать так по колонкам ?

4
  • 1
    колонки самые обычные, просто в правых padding-top добавляете 26 апр 2021 в 11:45
  • новости генерируются ), то есть добавляются в админке и выводится должны в таком порядке )
    – vencs
    26 апр 2021 в 11:48
  • 1
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 26 апр 2021 в 20:33
  • vencs, если вы задаете вопрос, и получаете ответы, то будьте добры, выбирать для себя полезный ответ и отмечать его галочкой как решенный. Иначе, в дальнейшем вас будут просто игнорировать. 6 мая 2021 в 11:38

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.