Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Beispielseiten

Inhaltsbereich

13.4.2 Drei Kästchen nach links floaten

In der ersten Übung werden alle drei Boxen nach links gefloatet. Das CSS dazu ist simpel:

div {
  float: left;
  font-weight: bold;
  width: 200px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

Im Browser stehen die drei Boxen jetzt nebeneinander:

Abbildung 13.7: Mit float: left schweben die Boxen nebeneinander
Abbildung 13.7: Mit float: left schweben die Boxen nebeneinander

Das erste div schwebt an der rechten Seite der umgebenden Box (in diesem Fall also body) so weit es geht nach oben und schwebt dann so weit es geht nach links rüber. Jede folgende Box macht genau dasselbe, sodass die drei Boxen auf der Seite nebeneinanderstehen.