passen verschiedene div Element, mit verschiedenen Größen, auf die gesamte Containerbreite

Question

Ich habe einen div-Container in verschiedenen Floating-div-Elemente: Ich möchte einige mit einer großen Breite (groß) haben, andere mit einer kleinen Breite (klein); gleichzeitig sollten alle von ihnen die gesamte Behälterbreite aufnehmen. Die Anzahl der Elemente small, big und total wird über Javascript dynamisch festgelegt, daher kann ich in css keine feste prozentuale Breite verwenden.

In einigen GUI-Entwickler-Software gibt es Stretch-Werte, um dieses Ziel zu erreichen.

Beispiel (statisch) html:

<div class="container"> 
    <div class="small">small</div> 
    <div class="big">BIG</div> 
    <div class="big">BIG</div> 
    <div class="big">BIG</div> 
    <div class="small">small</div> 
</div> 

Beispiel css:

.container { 
    display: block; 
    overflow: hidden; 
    width: 100%; } 

.big , .small { 
    float: left; } 

Dank!

Answer 1

Option 1: CSS Flex-Box

Sie CSS flex-Box für diese verwenden:

.container { 
 
    display:flex; 
 
    flex-wrap:nowrap; 
 
} 
 
    
 
.big { 
 
    flex-grow:2; 
 
    background-color:red; 
 
} 
 

 
.small { 
 
    flex-grow:1; 
 
    background-color:yellow; 
 
}

<div class="container"> 
 
    <div class="small">small</div> 
 
    <div class="big">BIG</div> 
 
    <div class="big">BIG</div> 
 
    <div class="big">BIG</div> 
 
    <div class="small">small</div> 
 
</div>

Option 2: JavaScript

Sie könnten eine JS-Methode erstellen, die berechnet die benötigte Gesamtbreite und legt den CSS-Stil im Vergleich dazu fest.

Theorie:

Small = 1 width 
Big = 2 width 

Blick auf diesen Link Artikel im div zu zählen: https://api.jquery.com/length/

4x big = 8 width 
5x small = 5 width 
total width = 13 width 

width per small in % = 100/13 
width per large in % = 100/13 * 2 

Satz, (. ZB mit JQuery) Breite