Wie kann ich eine dynamische Breite für Elemente basierend auf der Bildschirmgröße erstellen?

Question

ist hier mein Code:

.container{ 
 
    border:1px solid; 
 
    width: 70%; 
 
} 
 

 
.el { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    min-width: 250px; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

Bitte führen Sie über den Code-Snippet, klicken Sie auf Voll Schaltfläche Seite und die Seite ändern. Ich möchte div.container zu gleichen Teilen teilen.

Wenn also drei Elemente (div.el) in einer Reihe stehen, dann sollte width davon 33% sein. Wenn zwei Elemente in einer Reihe sind, sollte width50% sein.

Wie kann ich das tun? Ich habe bemerkt, dass ich kein Framework wie Bootstrap verwenden möchte.

Answer 1

Werfen Sie einen Blick auf Media Queries

Beispiel:

// Foo's original width is 100% 
.foo { 
    width: 100% 
} 

@media screen and (max-width: 100px){ 
    // Foo's width will be 50% when the view's width is below 100px 
    .foo { 
     width: 50% 
    } 
} 

... OR ... 

@media screen and (min-width: 100px){ 
    // Foo's width will be 50% when the view's width is over 100px 
    .foo { 
     width: 50% 
    } 
} 

Answer 2

Versuchen CSS-flex-Box verwenden. Wenden Sie die display:flex; Eigenschaft für Ihren Container an und manipulieren Sie die Objekte .el in diesem Container mit flex-grow: 1;, um sie auf die verbleibende Breite des Bildschirms auszudehnen und den Speicherplatz entsprechend zu teilen.

.container{ 
 
    display: flex; 
 
    width: 70%; 
 
    border: 1px solid black; 
 
} 
 
.el { 
 
    border: 1px solid red; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

CodePen Beispiel: https://codepen.io/CapySloth/pen/LLBgEB

Answer 3

.container{ 
 
    border:1px solid; 
 
    width: 70%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 
.el { 
 
    border: 1px solid red; 
 
    min-width: auto; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

Answer 4

Da ich das selbst tat, ich bin fast völlig sicher, dass der beste Weg, mit Flexbox der ist flex-wrap zu Lass die Gegenstände überlaufen d flex-grow, damit sie so viel Platz wie möglich einnehmen.

<div id="cont"> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
</div> 

#cont { 
    display: flex; 
    flex-wrap: wrap; 
} 

#cont div { 
    flex-grow: 1; 
    background: red; 
    padding: 10px; 
    margin: 10px; 
} 

Siehe here oder auf my own website.

Beachten Sie, dass dies kein Rastersystem ist, sodass die letzte Zeile nicht der gleichen Spaltenbreite wie alle vorherigen (vollen) Zeilen folgt. Wenn Sie möchten, dass die Zellen überlaufen, wenn der Platz verfügbar ist, und in der letzten Zeile auch wie ein Gitter aussehen, müssen Sie JavaScript aktivieren.