Über diese Site

Du kannst ein Boxen-Gitter erstellen, welches die Browserbreite ausfüllt und hübsch umbricht. Dies war schon geraume Zeit mit Hilfe von float möglich, aber jetzt mit inline-block ist es noch einfacher. Lass uns Beispiele für beide Vorgehensweisen anschauen.

Der mühsame Weg (mit float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich "floate!"

</div>

Ich nutze "clear " damit ich nicht neben die über mir liegende Box "floate".

</div>

Die einfache Art (mit inline-block)

Du kannst das Gleiche erreichen mit dem Wert inline-block für display.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

Ich bin ein inline block!

</div>

<div>

I benötige kein clear. Cool, oder?

</div>

Für den IE6 und IE7 braucht es extra Anstrengungen um inline-block zu unterstützen. Manchmal sprechen die Leute davon, dass es etwas braucht um bei eineminline-block etwas namens hasLayout zu provozieren. Darüber brauchst du nur Bescheid zu wissen, falls du alte Browser unterstützen willst. Folge dem vorherigen Link über IE6 und IE7 Support wenn du mehr lernen willst. Andernfalls lass uns weiter machen.

Zurück Weiter