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
    25 фев 2019 в 8:19
  • Значит, нужен элемент break, который будет иметь ширину 100% на тех разрешениях, где нужно по 2 элемента в строку, и ширину 0 на тех разрешениях, где блоки в строку располагаются. Этот break вставляется там, где нужен разрыв. Т.е. между 2 и 3 блоком, между 4 и 5 ... Хотя, предыдущий способ - точно рабочий. Просто Вам требуется его адаптировать к своему коду. Я просто пример привела.
    – dremlina
    25 фев 2019 в 8:38
  • @gremlina, окей. спасибо!
    – asdas
    25 фев 2019 в 8:42

Ваш ответ

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

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