CSS in neue Zeile springen?
Hallo,
ich habe ein html Dokument in folgender Form:
<html>
<head>
</head>
<body>
<div class="Class1">
<h1 class=user_caption>Caption</h1>
<section class="name_liste">
<div class="name blau">
<h3>hallo</h3>
</div>
<div class="name gelb">
<h3>hallo1</h3>
</div>
<div class="name grün">
<h3>hallo2</h3>
</div>
<div class="name rot">
<h3>hallo3</h3>
</div>
<div class="name pink">
<h3>hallo4</h3>
</div>
<div class="name weiß">
<h3>hallo5</h3>
<div></div>
</div>
</section>
</body>
</html>
nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.
habe als basis in css zumindest: name_liste { display: inline-flex }
MfG
2 Antworten
Ich habe dein Beispiel in diesem Fiddle bearbeitet: https://jsfiddle.net/6rx34qzb/
Beachte bei deinem Markup, dass du Doctype und title angibst. Das div war zudem noch nicht geschlossen.
Relevant für dein CSS:
.name_liste {
display: flex;
flex-wrap: wrap;
}
.name {
width: 33.33%;
}
Alternativ könntest du den Container, in dem sich die Liste befindet, in seiner Breite ändern. Es geht ja lediglich darum, auf eine Breite von 100% zu kommen, um den automatischen Umbruch zu erzwingen.
Oder du verwendest float und clear.
Einziges relevantes CSS:
.name {
float: left;
}
.rot {
clear: left;
}
eine frage noch: da bei weiß statt einem <img> ein <div> ist, wird dieser container bei "justify-content: space-around" und text-align: center nicht beachtet. alle elemente haben den selben abstand voneinander und zu den seiten, das weiß jedoch ist trotz selber maße zu weit weg vom rand.
Wieso benutzt du nicht ganz einfach Grid.
Dort kannst du genauer bestimmen WO WAS hinkommt
okay, danke. Dass die container die Größe verändern, ist nicht zu verhindern oder?