Erhalten eines Elternteils Div umarmen Sie es mehrere schwebende Kinder auf Seite Größe ändern mit CSS

Question

Ich mache eine Diashow mit mehreren User generierten Thumbnails füllen ein containing div. Das Layout reagiert, daher werden die Thumbs übereinander gestapelt, wenn die Größe der Seite geändert wird. Gibt es eine Möglichkeit, das Eltern-div zu zwingen, den Inhalt fest zu umarmen, wenn die Größe der Seite nur mit CSS geändert wird? Unten sind einige Bilder, um mein Problem zu illustrieren und mein Code ist enthalten.

Layout before resize

What I want to do

Gibt es trotzdem, den zusätzlichen Platz in Bild 2 entfernen ??

.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 - ich habe das Snippet geändert besser darzustellen, was ich versuche, zu erreichen, es funktioniert, aber es ist hässlich und die Browser Scrollbar kann vermasseln die Änderungen über das Media-Tag, wenn der Elternteil aufgrund mehrerer untergeordneter Elemente zu groß wird. Ich denke also, meine Frage ist, gibt es einen besseren Weg, um dies ohne die verschiedenen Medien-Tags zu erreichen?

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

Angenommen, Sie die Thumbnails Platz als auch behalten möchten. Sie müssen einen einfachen Padding-Hack mit der Verwendung von Prozentsätzen statt einer festen Breite tun.

Von was ich von Ihren Bildern erzählen kann, wollen Sie 6 Boxen auf größeren Bildschirmen zeigen. Sie müssen also Ihre Blöcke in 16,6666% Breiten aufteilen, was 1/6 der Breite des übergeordneten Containers ist. Damit dieser Hack funktioniert, müssen Sie die Höhe aus dem .child-Element entfernen und stattdessen das: psuedo-Element mit einem padding-bottom von 100% verwenden, um sicherzustellen, dass das Element quadratisch bleibt. Das Padding basiert auf der Breite, also unabhängig von der Breite, wird das Padding damit übereinstimmen.

Schließlich benötigen Sie ein absolut positioniertes Element innerhalb des Kindelements.

Lösung unter:

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

ich sehr empfehlen Ihnen die Verwendung von Medien-Anfragen mit Haltepunkten machen dies wirklich reaktionsfähiger zu machen. Auf diese Weise können Sie die Breite der Daumen auf verschiedenen Geräten anpassen.