Kurz gesagt, ich möchte ein reaktionsschnelles Rastersystem ohne Zeilen, um sie so dynamisch wie möglich zu halten. Der beste Ansatz, den ich bekommen habe, ist dieser:

approach

* { box-sizing: border-box; }

.wrapper {
  font-size: 0;
  border: 1px solid blue;
}

.item {
  font-size: 16px;
  vertical-align: top;
  width: 25%;
  border: 2px dashed #F44336;
  display: inline-block;
  padding: 20px;
}

.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }
<div class="wrapper">
  <div class="item">One Line.</div>
  <div class="item">Two<br>Lines.</div>
  <div class="item">Three<br>Lines<br>Here.</div>
  <div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
  <div class="item c2-3">Big Line.</div>
  <div class="item c1-3">Small Line.</div>
  <div class="item c1-2">Equal Line.</div>
  <div class="item c1-2">Equal Line.</div>
</div>

Das, was ich hier vermisse, ist, dass ich die Gegenstände nicht gleich hoch machen kann, wenn sie sich in einer Reihe befinden, damit sie so aussehen:

wish

Jetzt suche ich nach einer Lösung, um sie gleich hoch zu machen, ohne Zeilen für die Elemente zu verwenden. Flexbox-Lösungen sind willkommen, da ich ältere Browser nicht unterstützen muss. JS-Lösungen sind auch in Ordnung.

4
vigonotion 30 Dez. 2015 im 18:36

2 Antworten

Beste Antwort

So was?

Ich habe diese CSS-Optionen hinzugefügt:

 display: flex;
 flex-wrap: wrap;

 display: inline-flex;
* { box-sizing: border-box; }

.wrapper {
  font-size: 0;
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
}

.item {
  font-size: 16px;
  vertical-align: top;
  width: 25%;
  border: 2px dashed #F44336;
  display: inline-flex;;
  padding: 20px;
}

.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }
<div class="wrapper">
  <div class="item">One Line.</div>
  <div class="item">Two<br>Lines.</div>
  <div class="item">Three<br>Lines<br>Here.</div>
  <div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
  <div class="item c2-3">Big Line.</div>
  <div class="item c1-3">Small Line.</div>
  <div class="item c1-2">Equal Line.</div>
  <div class="item c1-2">Equal Line.</div>
</div>
2
Steve Wellens 30 Dez. 2015 im 16:04

Suchen Sie so etwas?

JSFIDDLE

-1
Spidi's Web 30 Dez. 2015 im 17:02