1

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

Но почему-то не работает. Подскажите в чем проблема? как расположить их по 2 в каждом ряду?

* {
  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>

2
  • А что вы делаете, что бы было по 2 картинки в строке? Я не вижу таких свойств.
    – E_K
    21 фев 2019 в 11:46
  • @E_K padding дал. можете пояснить?
    – asdas
    21 фев 2019 в 11:58

2 ответа 2

1

Добавь @media screen and (max-width: 768px) {.picture-box { flex-direction:column; }}

* {
  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%;
    }
    .picture-box {
    flex-direction:column;
    }
}

.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>

0

Вы не указали размеры блока с картинками, поэтому flex контейнер вмещает в одну строку столько картинок, сколько позволит размер. Из за свойства flex-wrap: wrap остальное переносится на следующую строку.

Вам нужно указать размер блока .ring для нужных размеров экрана, что бы для мобильных получить 2 блока в ряд нужна ширина 50% (это без учета margin). Стоит учитывать размеры изображения, если они будут фиксированые блоки всеравно будут смещаться, так как не подходят по размеру. Для этого можно сделать responsive изображения или использовать overflow: hidden.

* {
  box-sizing: border-box;
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.picture-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3rem 1.5rem;
}

.ring {
  flex: 0 0 calc(50% - 10px);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid green;
  text-align: center;
}


.thumb {
  display: inline-block;
  max-width: 200px;
  padding: 10px;
  border: 1px solid blue;
}

@media all and (min-width: 1024px) {
  .ring {
    flex: 0 0 calc((100% / 3) - (40px / 3))
  }
}
@media all and (min-width: 1240px) {
  .ring {
    flex: 0 0 calc((100% / 6) - (100px / 6))
  }
}
<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>

3
  • дело в том, что мне нужно чтобы у них flex-direction был не row а column, я исправил, но теперь они не по 2 штуки в ряд а друг под другом. Как это можно исправить?
    – asdas
    21 фев 2019 в 13:01
  • Вопрос нужно задавать корректно изначально. Что бы изменить нужно заменить свойство flex на width с тем же значением ширины и ограничить высоту flex контейнера.
    – E_K
    21 фев 2019 в 13:15
  • я сделал так как вы сказали, но не получилось. Я добавил обновленный код в вопрос. Посмотрите, пожалуйста.
    – asdas
    22 фев 2019 в 6:07

Ваш ответ

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

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