Fit div Breite zu Inline-Block Kinder (unbekannte Anzahl von divs pro Zeile)

Ich möchte den Container div (in diesem Beispiel) passen die width seiner Kinder, die inline-block divs sind.Fit div Breite zu Inline-Block Kinder (unbekannte Anzahl von divs pro Zeile)

Die Anzahl der div s pro Zeile ist unbekannt, weil es von der Größe des Bildschirms abhängt.

In dem Beispiel, was ich möchte, ist, dass es keinen zusätzlichen grauen Bereich auf der rechten Seite des Containers #a gibt.

Ist es möglich? (Reine CSS bitte)

#a { 
 
    background-color: gray; 
 
} 
 

 
.b { 
 
    width: 110px; 
 
    height: 110px;  
 
    display: inline-block; 
 
    background-color: blue; 
 
}

<div id="a"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Quelle

2015-06-28 Arnaud

Duplizieren - http://stackoverflow.com/questions/31104214/fit-div-width-to-inline-block-children. Bitte keine geschlossenen Fragen erneut stellen. –

@Paulie_D Ich denke, dass es kein Duplikat ist. – lmgonzalves

Sieht genauso aus wie ich. –

Da es keine CSS-only-Methode zu geben scheint, hier ist ein paar kurze JavaScript, um die Arbeit zu erledigen.

Vorübergehend die display Stil inline, der Eltern ändern, damit es schrumpft passen ihren Inhalt.
Legen Sie die Breite des übergeordneten Elements auf die Schrumpfbreite fest, indem Sie getBoundingClientRect() verwenden.
Stellen Sie die Standardvorlage display des übergeordneten Elements wieder her, indem Sie sie löschen.

Snippet

var a = document.getElementById('a'); 
 
a.style.display = 'inline'; 
 
a.style.width = a.getBoundingClientRect().width + 'px'; 
 
a.style.display = '';

#a { 
 
    background-color: gray; 
 
} 
 
.b { 
 
    width: 110px; 
 
    height: 110px; 
 
    display: inline-block; 
 
    background-color: blue; 
 
}

<div id="a"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Quelle

2015-06-30 11:24:21

Danke, das ist besser als nichts. – Arnaud

Nun, eine Lösung ist media queries zu verwenden:

#a { 
 
    background-color: gray; 
 
    display: block; 
 
    width: 110px; 
 
} 
 

 
.b { 
 
    width: 110px; 
 
    height: 110px;  
 
    display: inline-block; 
 
    background-color: blue; 
 
} 
 

 
@media (min-width: 220px){ 
 
    #a { 
 
     width: 220px; 
 
    } 
 
} 
 

 
@media (min-width: 330px){ 
 
    #a { 
 
     width: 330px; 
 
    } 
 
} 
 

 
@media (min-width: 440px){ 
 
    #a { 
 
     width: 440px; 
 
    } 
 
} 
 

 
@media (min-width: 550px){ 
 
    #a { 
 
     width: 550px; 
 
    } 
 
} 
 

 
@media (min-width: 660px){ 
 
    #a { 
 
     width: 660px; 
 
    } 
 
}

<div id="a"> 
 
    <div class="b"></div><!-- 
 
    --><div class="b"></div><!-- 
 
    --><div class="b"></div><!-- 
 
    --><div class="b"></div><!-- 
 
    --><div class="b"></div><!-- 
 
    --><div class="b"></div> 
 
</div>

JSFiddle

Quelle

2015-06-28 21:06:26 Vucko

Gibt es eine Möglichkeit, eine Art von For-Schleife zu machen? – Arnaud

Sicher, wenn Sie einen CSS-Präprozessor wie [SASS] (http://sass-lang.com/) oder [LESS] (http://lesscss.org/) verwenden. – Vucko

Ok. Danke für diese Lösung, es scheint gut, aber ich würde eine "elegantere" Lösung bevorzugen, wenn jemand eine hat. – Arnaud

Wir Eigentum von Tabellen verwenden können, oder Inline-Block, der seine Breite nach Bedarf anpassen. Aber es löst das Problem nicht vollständig, wenn Sie Boxen in mehr als 1 Zeile

So fügen Sie einfach display:table; zu #a

<style> 
#a { 
    background-color: gray; 
    display:table; 
} 

.b { 
    width: 110px; 
    height: 110px;  
    display: inline-block; 
    background-color: blue; 
} 
</style> 
<div id="a"> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
</div>

Quelle

2015-07-04 16:52:56

Ich habe nicht viel Ruf zu kommentieren. Also meine Vorschläge hier hinzugefügt. Dies wird in Firefox unterstützt. Für andere Browser müssen wir das überprüfen.

#a { 
 
    background-color: gray; 
 
    display: -moz-inline-box; 
 
} 
 

 

 
#a:after, #a:before { 
 
    display: table; 
 
    content: ""; 
 
} 
 
#a:after{ 
 
    clear: both; 
 
} 
 

 
.b { 
 
    width: 110px; 
 
    height: 110px;  
 
    float: left; 
 
    background-color: blue; 
 
    border: 2px solid #888; 
 
}

<div id="a"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

click here for display: -moz-inline-box demo

click here for display: -moz-inline-box

Quelle

2015-07-06 04:52:15 Som

das Sehen ist es wenig hacky Lösung. aber vielleicht hilft es dir.

.b { 
 
    width: 110px; 
 
    height: 110px; 
 
    display: inline-block; 
 
    background-color: blue; 
 
    border: 8px solid gray; 
 
    float: left; 
 
    
 
}

<div id="a"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Quelle

2015-07-09 04:27:37

Ein Blick auf diese:

unterteilt den Bildschirm in 10 Teile mit: width: 10vw. es bedeutet 10 Prozent der Ansichtsbreite.

body, html{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#cont { 
 
    width: 100%; 
 
    text-align: left; 
 
    overflow: hidden; 
 
    background: black; 
 
} 
 

 
#cont .cell { 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background: red; 
 
    float: left; 
 
    
 
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1); 
 
}

<div id="cont"> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
    <div class="cell"></div> 
 
</div>

Quelle

2015-07-10 15:41:25

Nicht sicher, ob dies ist, was Sie suchen, und ich glaube nicht alles < ie9 es unterstützt, aber man konnte das Flexbox Modell verwenden.

#a { 
 
    background-color: gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.b { 
 
    width: 110px; 
 
    height: 110px;  
 
    display: inline-block; 
 
    background-color: blue; 
 
    border: 1px solid #fff; 
 
}

<div id="a"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Quelle

2015-07-11 04:47:59 shrekked

Wenn die Anzahl der inneren Elemente abhängig ist ganz auf die Breite des Bildschirms (was bedeutet, dass Sie Code irgendwo haben, dass die Anzahl der Elemente auf dieser Breite basiert erzeugt), dann ist diese könnte gut sein, was Sie suchen. Ich würde diese Generation jedoch nicht als Annäherung empfehlen, da Ihr äußerer Div vollständig ein Container ist und jede reaktionsschnelle Kapazität verliert, die Sie sich erhofft haben könnten. Aber wenn ein Container ist, was Sie brauchen, dann wird dies sicherlich funktionieren. Beachten Sie, dass die Breite des Container-Divs kleiner sein muss als die Breite des kleinsten Elements, andernfalls nimmt es so viel Breite wie möglich ein.

#a { 
 
    background-color: gray; 
 
    display: flex; 
 
    width:50px; 
 
} 
 

 
.b { 
 
    min-width: 110px; 
 
    height: 110px;  
 
    display: inline-block; 
 
    background-color: blue; 
 
} 
 
.c { 
 
    min-width: 110px; 
 
    height: 110px;  
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div id="a"> 
 
    <div class="b">sample Text</div> 
 
    <div class="c">sample Text</div> 
 
    <div class="b">sample Text</div> 
 
    <div class="c">sample Text</div> 
 
    <div class="b">sample Text</div> 
 
    <div class="c">sample Text</div> 
 
    <div class="b">sample Text</div> 
 
    <div class="c">sample Text</div> 
 
    <div class="b">sample Text</div> 
 
</div>

Quelle

2015-07-11 14:56:38 MetalPhoenix

Fit div Breite zu Inline-Block Kinder (unbekannte Anzahl von divs pro Zeile)

Antwort

Verwandte Themen