Gibt es eine Möglichkeit, die divs in Container 3 hintereinander auszurichten?Anzeigen von Divs in Zeilen
<div class="container">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
Flexbox kommen ist, dass man zu lösen. ein anderer (alt) Ansatz ist Anzeige zu verwenden: (. statt float) inline-block
.product {
display: inline-block;
width: 30%;
height: 50px;
border: 1px solid green;
}<div class="container">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>Float ist eine schreckliche Option. Benutze es nicht. Inline-Block ist auch ein Hack ... beachte, dass der Autor '30%' verwenden musste, weil '33%' aufgrund der Leerzeichen zwischen den Blöcken 2-pro-Zeile verursachen würde. Verwenden Sie für moderne Browser flex. – JDB
stimme voll und ganz mit Ihnen überein. Ich versuche nur alt zu geben. Aber wenn Sie mit Inline-Block bleiben und dasselbe Ergebnis haben wollen mit: height = 33.3% "können wir einfach hinzufügen " margin-left: -5px; ". gute Sache über Inline-Block im Vergleich zu" Foat "ist Wir müssen nicht klar verwenden: beide nach – RizkiDPrast
ja, es ist ein Problem, denn wenn ich mehr als 3 Divs im Container habe, sieht alles gut aus, aber wenn ich 2 habe, überlappen sie –
Ja, und flexbox ist der beste Weg
.container {
display: flex;
flex-wrap: wrap;
}
.container .product {
flex: 1 0 33%;
height: 50px;
border: 1px solid black;
}<div class="container">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>.container {
width: 100%;
}
.product {
width:33.33%;
background: blue;
min-height: 100px;
float:left;
}<div class="container">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
<div class="product">6</div>
<div class="product">7</div>
<div class="product">8</div>
<div class="product">9</div>
</div>Beat mich dazu Kumpel. Dies ist der Weg, um zu gehen. – user1567453
@ user1567453 Nein ist es nicht, Schwimmer sind nicht für das Layout – LGSon
ugh. schwebend. das verursacht alle möglichen unangenehmen Probleme. Zum Beispiel wird der Container nicht auf den Inhalt Ihrer Floated Divs skaliert. http://stackoverflow.com/questions/2442934/container-div-ignores-height-of-floated-elements – JDB
Bootstrap Lösung:
https://jsfiddle.net/e76tknpq/
<div class="row">
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
</div>
<div class="row">
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
</div>
<div class="row">
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
</div>
CSS
.product:nth-child(even){
background: red;
height:180px;
}
.product:nth-child(odd){
background: green;
height:180px;
}
möglich Duplikat: http://stackoverflow.com/q/2603700/ 3597276 –