Получение родительского Div для обнимания его нескольких плавающих детей при изменении размера страницы с помощью css

Question

Я делаю слайд-шоу с несколькими созданными пользователем эскизами, заполняющими содержащий div. Макет реагирует, поэтому большие пальцы будут складываться друг на друга при изменении страницы. Есть ли способ заставить родительский div жестко обнимать содержимое при изменении размера страницы с помощью только css? Ниже приведены некоторые рисунки, иллюстрирующие мою проблему, и мой код включен.

Layout before resize

What I want to do

Есть в любом случае, чтобы удалить дополнительное пространство в изображении 2 ??

.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px; position: absolute;} 
 

 
.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px;}

<div class="parent"> 
 

 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 
\t <div class="child"></div> 
 

 
</div>

EDIT - я изменил фрагмент кода, чтобы лучше представить то, что я пытаюсь выполнить, это работает, но это некрасиво и браузеры ScrollBar могут испортить эти изменения через тег мультимедиа, когда родитель становится слишком большим из-за нескольких детей. Итак, я думаю, мой вопрос сейчас, есть ли лучший способ добиться этого без нескольких тегов мультимедиа?

body { margin:0; padding:0;} 
 

 
.cnt{text-align:center; max-width:960px; background-color:#000000; margin:0px auto; overflow:hidden} 
 

 
.parent{background-color:#003300; overflow: auto; padding:0px 20px 20px 0px;display:inline-block} 
 

 
.child{ width:100px; height:100px; float:left; background-color:#000066; margin:20px 0px 0px 20px; text-align:center; line-height:100px; font-size:36px} 
 

 

 
@media (max-width:740px) and (min-width:621px){.child:nth-child(5n+6){ clear:both;}} 
 
@media (max-width:620px) and (min-width:501px){.child:nth-child(4n+5){ clear:both;}} 
 
@media (max-width:500px) and (min-width:381px){.child:nth-child(3n+4){ clear:both;}} 
 
@media (max-width:380px) and (min-width:261px){.child:nth-child(2n+3){ clear:both;}} 
 
@media (max-width:260px) and (min-width:0px){.child{clear:both;}}

<div class="cnt"> 
 
<div class="parent"> 
 

 
\t <div class="child">1</div> 
 
\t <div class="child">2</div> 
 
\t <div class="child">3</div> 
 
\t <div class="child">4</div> 
 
\t <div class="child">5</div> 
 
\t <div class="child">6</div> 
 

 
</div> 
 
</div>

Answer 1

Предполагая, что вы хотели бы сохранить эскизы квадрат, а также. Вам придется сделать простой хакерский взлом с использованием процентов, а не фиксированной ширины.

Из того, что я могу сказать по вашим фотографиям, вам нужно отобразить 6 ящиков на больших экранах. Таким образом, вам нужно разбить блоки на 16.6666% ширины, что на 1/6 ширины родительского контейнера. Чтобы этот хак работал, вам нужно будет удалить высоту из элемента .child и вместо этого использовать элемент after после psuedo с долей заполнения 100%, это гарантирует, что элемент останется квадратным. Отступы основаны на ширине, поэтому независимо от ширины прокладка будет соответствовать ей.

Наконец, вам понадобится элемент с абсолютным расположением внутри дочернего элемента.

Решение ниже:

.parent{ 
 
     background-color:#003300; 
 
     overflow:hidden; 
 
     max-width:960px; 
 
} 
 
.child { 
 
    position: relative; 
 
    width:16.6666%; 
 
    float:left; 
 
    box-sizing: border-box; 
 
} 
 
.child:after { 
 
    content: ""; 
 
    display: block; 
 
    padding-bottom: 100%; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color:#000066; 
 
    width: 90%; 
 
    height: 90%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="inner"> 
 
      
 
    </div> 
 
    </div> 
 
</div>

Я настоятельно рекомендую вам использовать запросы средств массовой информации с точки останова, чтобы сделать это действительно отзывчивый. Это позволит вам настроить ширину больших пальцев на разных устройствах.