0

подскажите пожалуйста как сделать такие адаптивные блоки с изображением, в таком расположении и с информацией внутри как на сайте Яндекс Авиабилеты ?

8
  • А вы посмотрите код с помощью Inspect Element
    – eccs0103
    25 июл 2019 в 14:03
  • Ну рассказывайте с какими проблемами вы столкнулись и что же у вас не получается? Что не позволяет вам открыть консоль и просто скопировать это у яндекса?
    – Nilsan
    25 июл 2019 в 14:03
  • @Nilsan Они как-то по особому порядку адаптируются, так не получается.
    – Arcadiy
    25 июл 2019 в 14:05
  • @Alt_F4 Слишком много кода, путаюсь в нем
    – Arcadiy
    25 июл 2019 в 14:05
  • @Arcadiy что же там особого*? Блоки идут 1 -> 3 -> 2 -> 3 -> 2 -> 3 -> 2 ->3 и т.д. всё идёт 2 -> 3 Используйте nth-child как вариант. Хотя если глянуть то сможете увидеть что яндекс просто добавляет класс где должно быть 2 элемента
    – Nilsan
    25 июл 2019 в 14:09

2 ответа 2

1

.el_wrapper {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

.element {
  width: 33.33%;
  border: 1px solid #000;
  min-width: 100px;
  min-height: 50px;
  margin-bottom: 5px;
  box-sizing: border-box;
  position: relative;
}

.half {
  width: 50%;
}

.img_api {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="el_wrapper">
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element half">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
  <div class="element">
    <div class="img_api" style="background: url('https://avatars.mds.yandex.net/get-avia/200364/2a0000015cb1ddae583928eb050ee587ce7b/offer-desktop');"></div>
  </div>
</div>

По аналогии с яндексом

10
  • Еслив блок элемент поставить большую картинку, то она занимает и налазит на соседние блоки, изображение внутри не адаптируется.
    – Arcadiy
    25 июл 2019 в 14:28
  • @Arcadiy картинку нужно вставлять не через <img /> а в виде background: url(); либо использовать object-fit:; правда я бы не советовал так делать (но оно работает)
    – Nilsan
    25 июл 2019 в 14:31
  • У меня картинки по АПИ приходят, как я их в css внесу?
    – Arcadiy
    25 июл 2019 в 14:34
  • @Arcadiy немного переделал ответ. Как-то так
    – Nilsan
    25 июл 2019 в 14:38
  • 2
    @Arcadiy знаете тут уже больше попахивает заявкой для биржи фриланса. Еще раз скажу как у яднекса это сделано: 1 первый элемент (на всю ширину) идёт отдельным div. потом идёт так сказать "wrapper" в котором уже код аналогичный тому что я дал в ответе. Каким образом они добавляют класс каждому 4му и 5му элементу я ХЗ (и разбираться не хочу даже). Ответ на ваш вопрос я уже дал. Но вы можете взять мой ответ и создать новый вопрос где уже спросить как эту конструкцию переделать так чтоб было без half а было с nth например или на js считалось и добавляло класс нужным элементам
    – Nilsan
    25 июл 2019 в 15:28
1

Таким образов вы можете сортировать блоки любых размеров!

content {
  flex: all;
  justify-content: space-between;
}

div {
  margin: 10px;
  border: 2px solid black;
  display: inline-block;
}

h1 {
  font-size: 40px;
  text-align: center;
  margin: 30px;
}
<content>
  <div style=" width: 200px; height: 100px;">
    <h1>1</h1>
  </div>
  <div style=" width: 300px; height: 100px;">
    <h1>2</h1>
  </div>
  <div style=" width: 400px; height: 100px;">
    <h1>3</h1>
  </div>
  <div style=" width: 500px; height: 100px;">
    <h1>4</h1>
  </div>
  <div style=" width: 600px; height: 100px;">
    <h1>5</h1>
  </div>
</content>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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