4 плавающих раздела, которые симметрично реагируют на сужающиеся экраны с помощью CSS

#css #responsive

#css #отзывчивый

Вопрос:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

У меня есть четыре раздела, плавающие слева (вверху), используя простой CSS: float: left; width: 128px; height: 128px

Когда я сужаю экран, последний раздел правильно переходит на следующую строку:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ]

Но чего бы мне действительно хотелось, так это чтобы последние два блока переходили на следующую строку, чтобы сохранить симметричный вид:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

И когда экран сужается еще больше, блоки укладываются один над другим:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

Ответ №1:

Вот один из способов сделать это с помощью медиа-запросов.

Хитрость заключается в том, чтобы выбрать подходящую точку останова для max-width , например, 610 пикселей, а затем использовать nth-child выбранный, чтобы очистить значение с плавающей точкой для каждого 3-го дочернего элемента, начиная с 3-го.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

 .box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
}
.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}
@media (max-width: 610px) {
  .box {
    background-color: yellow;
  }
  .box:nth-child(2n 3) {
    background-color: red;
    clear: left;
  }
}

 <div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Ответ №2:

Сгруппируйте [3] и [4] вместе в div (и [1] и [2], если хотите). Дайте ему максимальную ширину, но автоматическую высоту. Таким образом, когда экран сужается, два раздела должны двигаться бок о бок, но прыгать вниз, когда экран становится уже.

пример:

 .contain {
    max-width:256px;
    height:auto;
}

<div class="contain">
    <div class="div3">contents</div>
    <div class="div4">contents</div>
</contain>

Ответ №3:

Отлично, но для улучшения отзывчивости и удовлетворения последнего требования вы можете использовать это:

 .box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
  width: calc(25% - 20px);
}

.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}

@media (max-width: 610px) {
  .box {
    background-color: yellow;
    width: calc(50% - 20px);
  }
  .box:nth-child(2n 3) {
    background-color: red;
    clear: left;
  }
}

@media (max-width: 400px) {
  .box {
    background-color: yellow;
    width: calc(100% - 20px);
  }
  .box:nth-child(2n 3) {
    background-color: yellow;
    clear: initial;
  }
}

 <div class="container-box">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Ответ №4:

Попробуйте поместить 2 divs в контейнер div, затем установите ширину этого контейнера div в два раза больше размера каждого обычного div.

 <div class="container-box">
    <div class="box">1</div>
    <div class="box">2</div>
</div>
<div class="container-box">
    <div class="box">3</div>
    <div class="box">4</div>
</div>

.box {    
    float:left; 
    width:128px;
    height:128px;
    background: grey;
}

.container-box {
    float: left;
    width: 256px;
    height: 128px;
}

Вот ссылка на скрипку:https://jsfiddle.net/wfhk1fak/1 /

Надеюсь, это поможет.