Unterschied. display: inline; & float; left;

[Raucherkrebs]

Hallo Forum,

was ist der Unterschied zwischen display: inline; & float; left;?

Wenn ich 2DIVs nebeneinander anordnen möchte welches ist dann vorteilhafter?

[Elya]

Hallo Raucherkrebs,

was ist der Unterschied zwischen display: inline; & float; left;?

Wenn ich 2DIVs nebeneinander anordnen möchte welches ist dann vorteilhafter?

Was mir so auf die Schnelle dazu einfällt:

Bei float *mußt* du eine Breite definieren, bei inline (darfst du glaube ich) nicht.

Du kannst z.B. horizontale Listen mit beiden Techniken aufbauen, beides hat Vor- und Nachteile. floatende <li>-Elemente kannst du z.B. nicht noch zusätzliche zentrieren innerhalb des <ul>, die stehen entweder rechts oder links. Andererseits interpretieren IE < 5.5 Randabstände in Inline-Elementen nicht, bei floatenden Blockelementen schon.

Gruß aus Köln-Ehrenfeld,

Elya

[Utz]

Hallo,

Gemeinsam ist, dass beides im wesentlichen nur bei Block-Elementen sinnvoll ist.

mit display:inline; legst Du fest, dass ein Element ein Inline-Element wird, das nicht innerhalb einer Block-"Box" dargestellt wird (also nicht die üblichen Zeilenumbrüche davor und danach).

mit float:left; legst Du fest, dass das Block-Element weiterhin als Block-"Box" dargestellt wird, aber vom folgenden Text umflossen wird.

NB: Prinzipiell kannst Du float:left auch auf Inline-Elemente anwenden, wenn Du sie vorher per display:block; zu virtuellen Block-Elementen umgewandelt hast.

Grüße,
Utz

[MudGuard]

Hi,

NB: Prinzipiell kannst Du float:left auch auf Inline-Elemente anwenden, wenn Du sie vorher per display:block; zu virtuellen Block-Elementen umgewandelt hast.

Nö, display muß nicht explizit auf block gesetzt werden. Das geschieht automatisch durch das float, siehe:

http://www.w3.org/TR/REC-CSS2/visuren.html#q24
3. Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.

cu,
Andreas

[Utz]

Hallo Andreas,

Nö, display muß nicht explizit auf block gesetzt werden. Das geschieht automatisch durch das float, siehe:

Danke, wieder was dazu gelernt (und wieder eine ganze Zeile Code gespart, unglaublich! *g*)

Grüße,
Utz

[MudGuard]

Hi,

was ist der Unterschied zwischen display: inline; & float; left;?

Einige der Unterschiede:

Ein inline-Element liegt in einer Zeile (sprich: die weiteren inline-Elemente daneben liegen auf derselben Zeile oder aber darunter).
Bei float:left dagegen können neben dem gefloateten Element beliebig viele Zeilen liegen.

float erfordert (in CSS 2.0) bzw. erlaubt (in CSS 2.1) eine Breitenangabe, display:inline erlaubt keine Breitenangabe.

float führt zur Darstellung als rechteckige Box, display:inline nicht (notwendigerweise)

(diese Liste erhebt keinen Anspruch auf Vollständigkeit)

cu,
Andreas

[Ingo Turski]

Hi,

Wenn ich 2DIVs nebeneinander anordnen möchte welches ist dann vorteilhafter?

dann dürfte display:inline ziemlich unsinnig sein, da hier wohl ein span dieselbe Funktion erfüllen wird.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Wenn ich 2DIVs nebeneinander anordnen möchte welches ist dann vorteilhafter?
dann dürfte display:inline ziemlich unsinnig sein, da hier wohl ein span dieselbe Funktion erfüllen wird.

Nur, falls an der Stelle im HTML ein inline-Element zulässig ist.

cu,
Andreas