0

Есть 6 блоков которые стоят в столбик. Мне нужно, чтобы в мобильной версии они отображались по 2 блока на каждой строке. То есть всего 3 строки чтобы было. Как это сделать, помогите. Вот код:

* {
  box-sizing: border-box;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.picture-box {
  width: 70%;
  /* limit screen width - max width could have been used aswell */
  margin: 0 auto;
  /* center content */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ring {
  padding: 10px;
  text-align: center;
  /* Center ring div */
}

@media screen and (min-width: 1200px) {
  .ring {
    width: 25%;
  }
}

@media screen and (max-width: 1199px) {
  .ring {
    width: 33.33%;
  }
}

@media screen and (max-width: 768px) {
  .ring {
    width: 50%;
  }
  .picture-box {
    width: 100%;
  }
}

.thumb {
  display: inline-block;
  max-width: 200px;
  padding: 10px;
  border: 1px solid blue;
}
<div class="picture-box">
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
  <div class="ring">
    <div class="thumb">
      <img src="https://via.placeholder.com/200">
    </div>
  </div>
</div>

1 ответ 1

0

Вам нужно использовать псевдокласс nth-child, я думаю. + псевдоэлемент:after. Что-то такое будет, видимо:

@media screen and (min-width: нужные разрешения экрана) {
        .ring: nth-child(2n) 
         after;
    }
3
  • не помогло. блоки все равно в ряд стоят(
    – asdas
    Commented 25 февр. 2019 в 8:19
  • Значит, нужен элемент break, который будет иметь ширину 100% на тех разрешениях, где нужно по 2 элемента в строку, и ширину 0 на тех разрешениях, где блоки в строку располагаются. Этот break вставляется там, где нужен разрыв. Т.е. между 2 и 3 блоком, между 4 и 5 ... Хотя, предыдущий способ - точно рабочий. Просто Вам требуется его адаптировать к своему коду. Я просто пример привела.
    – dremlina
    Commented 25 февр. 2019 в 8:38
  • @gremlina, окей. спасибо!
    – asdas
    Commented 25 февр. 2019 в 8:42

Ваш ответ

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

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