float: left; vs Anzeige: Inline; vs Anzeige: Inline-Block; vs Anzeige: Tabellenzelle;

281

Meine Fragen)

  1. Wird eine dieser Methoden von einem professionellen Webdesigner bevorzugt?

  2. Wird eine dieser Methoden beim Zeichnen der Website von einem Webbrowser bevorzugt?

  3. Ist das alles nur eine persönliche Präferenz?

  4. Gibt es andere Techniken, die mir fehlen?

Hinweis: Die obigen Fragen beziehen sich auf das Entwerfen eines mehrspaltigen Layouts


float: left;

http://jsfiddle.net/CDe6a/

float: linkes Bild

Dies ist die Methode, die ich immer beim Erstellen von Spaltenlayouts verwende, und sie scheint gut zu funktionieren. Der Elternteil kollabiert jedoch auf sich selbst, sodass Sie sich danach nur noch daran erinnern müssen clear:both;. Ein weiterer Nachteil , den ich gerade gefunden habe, war die Unfähigkeit, Text vertikal auszurichten.

Anzeige: Inline;

Dies scheint das Problem des zusammenbrechenden übergeordneten Elements zu beheben, fügt jedoch Leerzeichen hinzu.

http://jsfiddle.net/CDe6a/1/

Anzeige: Inline-Bild

Das Entfernen von Leerzeichen aus HTML scheint die einfachste Lösung für dieses Problem zu sein, ist jedoch nicht erwünscht, wenn Sie in Bezug auf Ihr HTML wirklich wählerisch sind.

http://jsfiddle.net/CDe6a/2/

Kein HTML-Leerzeichen

Anzeige: Inline-Block;

Scheint sich genau so zu verhalten display:inline;.

http://jsfiddle.net/CDe6a/3/

Anzeige: Inline-Block-Bild

Anzeige: Tabellenzelle;

http://jsfiddle.net/CDe6a/4/

Anzeige: Tabellenzellenbild

Funktioniert perfekt.

Meine Gedanken:

Ich bin mir sicher, dass mir eine Menge Dinge fehlen, wie bestimmte Ausnahmen, die das Layout beschädigen, display:table-cell;aber am besten zu funktionieren scheinen, und ich denke, ich werde anfangen zu ersetzen, float:left;da ich immer durcheinander zu sein scheine clear:both;. Ich habe viele Artikel und Blogs darüber im Internet gelesen, aber keiner von ihnen gibt mir eine eindeutige Antwort darauf, was ich beim Layout meiner Website verwenden sollte.

EGHDK
quelle
4
Sehen Sie, was die Jungs von html5boilerplate und Twitter Bootstrap verwenden und bleiben Sie dabei
Robert Niestroj
1
Es gibt einen großartigen Artikel über den Kampf gegen den Weltraum bei CSS-Tricks: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea Rosema
Ich habe versucht, die display: inlineEigenschaft zu verwenden, und festgestellt, dass das Auffüllen der untergeordneten Elemente nicht korrekt ist. Aber wenn ich das benutze, wird display: inline-blockdies automatisch erledigt. Bitte sehen Sie den Link - codepen.io/prashdeep/pen/rVOyvd Bitte teilen Sie mir Ihre Eingaben auf dem gleichen
zilcuanu

Antworten:

200

Von den Optionen, nach denen Sie gefragt haben:

  • float:left;
    Ich mag Floats nicht, weil ich zusätzliche Markups brauche, um den Float zu löschen. Für mich war das gesamte floatKonzept in den CSS-Spezifikationen schlecht gestaltet. Daran können wir jetzt aber nichts ändern. Wichtig ist jedoch, dass es funktioniert und in allen Browsern (auch in IE6 / 7) funktioniert. Verwenden Sie es also, wenn Sie es mögen.

Das zusätzliche Markup zum Löschen ist möglicherweise nicht erforderlich, wenn Sie :afterdie Floats mit dem Selektor löschen. Dies ist jedoch keine Option, wenn Sie IE6 oder IE7 unterstützen möchten.

  • display:inline;
    Dies sollte nicht für das Layout verwendet werden, mit Ausnahme von IE6 / 7, wo display:inline; zoom:1ein Fallback-Hack für die defekte Unterstützung für ist inline-block.

  • display:inline-block;
    Dies ist meine Lieblingsoption. Es funktioniert gut und konsistent in allen Browsern, mit einer Einschränkung für IE6 / 7, die es für einige Elemente unterstützt. Aber siehe oben für die hackige Lösung, um dies zu umgehen.

Die andere große Einschränkung inline-blockist, dass aufgrund des Inline-Aspekts die Leerzeichen zwischen Elementen genauso behandelt werden wie Leerzeichen zwischen Textwörtern, sodass Lücken zwischen Elementen auftreten können. Es gibt Workarounds, aber keine davon ist ideal. (Das Beste ist einfach, keine Leerzeichen zwischen den Elementen zu haben.)

  • display:table-cell;
    Eine andere, bei der Sie Probleme mit der Browserkompatibilität haben. Ältere IEs funktionieren damit überhaupt nicht. Aber auch für andere Browser ist es erwähnenswert, dass table-cellsie in einem Kontext verwendet werden, in dem sie sich in Elementen befinden, die als tableund gestaltet sind table-row. Die table-cellisolierte Verwendung ist nicht die beabsichtigte Methode, daher kann es vorkommen, dass verschiedene Browser sie unterschiedlich behandeln.

Andere Techniken, die Sie vielleicht verpasst haben? Ja.

  • Da Sie sagen, dass dies für ein mehrspaltiges Layout gilt, gibt es eine CSS -Spaltenfunktion, über die Sie möglicherweise Bescheid wissen möchten. Es ist jedoch nicht die am besten unterstützte Funktion (wird vom IE selbst in IE9 nicht unterstützt und ein Herstellerpräfix wird von allen anderen Browsern benötigt), sodass Sie sie möglicherweise nicht verwenden möchten. Aber es ist eine andere Option, und Sie haben gefragt.

  • Es gibt auch die CSS FlexBox-Funktion, mit der Text von Feld zu Feld fließen kann. Es ist eine aufregende Funktion, die einige komplexe Layouts ermöglicht, die sich jedoch noch in der Entwicklung befindet - siehe http://html5please.com/#flexbox

Hoffentlich hilft das.

Spudley
quelle
2
Sie benötigen kein zusätzliches Markup, um Floats zu löschen. Siehe meine Antwort dazu.
Lie Ryan
3
Robusteste Antwort = Antwort.
EGHDK
2
Ich benutze immer, inline-blockweil es genau für diese Fälle gemacht ist.
Rápli András
1
Eine gute Methode zum Entfernen des angezeigten Leerzeichens: Inline-Block erstellt. Sie können die Schriftgröße für das Containerelement auf 0 setzen und dann die gewünschte Größe für die Inline-Elemente selbst festlegen. Dadurch wird vermieden, dass Leerzeichen im HTML-
Code entfernt werden müssen
1
@ AlexMorley-Finch: In der Tat ist das eine gute Lösung. Beachten Sie jedoch, dass dies nicht funktioniert, wenn Sie Schriftgrößen in ems verwenden. Dies bedeutet, dass dies möglicherweise nicht in allen Fällen eine geeignete Lösung ist. Vielleicht möchten Sie auch diese Antwort sehen, die ich separat gepostet habe und die diesen Punkt abdeckt, sowie andere Optionen für die Behandlung des Leerraumproblems.
Spudley
34

Normalerweise verwende float: left;und füge ich hinzu overflow: auto;, um das zusammenbrechende übergeordnete Problem zu lösen (warum dies funktioniert, overflow: autowird das übergeordnete Problem erweitert, anstatt Bildlaufleisten hinzuzufügen, wenn Sie ihm keine explizite Höhe geben, overflow: hiddenfunktioniert auch). Die meisten vertikalen Ausrichtungsanforderungen, die ich hatte, beziehen sich auf eine Textzeile in Menüleisten , die mithilfe von line-heightEigenschaften gelöst werden kann . Wenn ich ein Blockelement wirklich vertikal ausrichten muss, würde ich eine explizite Höhe für das übergeordnete Element und das vertikal ausgerichtete Element festlegen, die Position absolut, die oberen 50% und den negativen Rand.

Der Grund, den ich nicht verwende, display: table-cellist die Art und Weise, wie es überläuft, wenn Sie mehr Elemente haben, als die Breite der Site verarbeiten kann. Die Tabellenzelle zwingt den Benutzer zum horizontalen Scrollen, während Floats das Überlaufmenü umschließen, sodass es weiterhin verwendet werden kann, ohne dass horizontales Scrollen erforderlich ist.

Das Beste an float: left und overflow: auto ist, dass es ohne Hacks bis zum IE6 zurückkehrt, wahrscheinlich sogar noch weiter.

Geben Sie hier die Bildbeschreibung ein

Lie Ryan
quelle
Dieser hervorragende Punkt wird in vielen beliebten Tutorials nicht erwähnt. Einige Fragen: Wird dies tatsächlich in verschiedenen Browsern getestet? Was ist Ihre bevorzugte Methode, um ein Trennzeichen zwischen zwei Blöcken wie Navi und Inhalt zu ziehen? Der Grund, den ich frage, ist, dass es schwierig wäre, wenn die oben genannten Divs unterschiedlich hoch sind.
Shital Shah
@ShitalShah: Ich bin mir nicht ganz sicher, was Sie mit "dies" meinen, aber ich habe unzählige horizontale Menüs implementiert und der Float links und Überlauf ist IMO die sauberste und zuverlässigste Möglichkeit, horizontale Menüs in vielen verschiedenen Browsern zu implementieren, alten und alten Neu. Zum Hinzufügen von Trennzeichen verwende ich normalerweise den linken Rand (oder Hintergrundbilder für schickere Trennzeichen. Wenn Sie sich nicht um alte Browser kümmern müssen, können Sie auch das CSS3-Rahmenbild verwenden). Ich verstehe nicht ganz, was du mit unterschiedlichen Höhen meinst, willst du mehr erklären oder eine Geige hinzufügen?
Lie Ryan
Dies klärte viel über das Löschen auf und ich wusste nicht, dass ein Überlauf dies tun könnte. Ich bin an die: after-Methode gewöhnt, bei der du einen Inhalt hinzufügst: "." und Sichtbarkeit: versteckt. Danke dafür
Nils_e
9

Ich würde sagen, es hängt davon ab, wofür Sie es brauchen:

  1. Wenn Sie es nur benötigen, um ein 3-Spalten-Layout zu erhalten, würde ich vorschlagen, es mit zu tun float.

  2. Wenn Sie es für das Menü benötigen, können Sie es verwenden inline-block. Für das Leer Problem, können Sie einige Tricks verwenden , wie von Chris Coyier hier beschrieben http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .

  3. Wenn Sie eine Multiple-Choice-Option auswählen müssen, bei der die Breite innerhalb eines bestimmten Felds gleichmäßig verteilt sein muss, würde ich es vorziehen display: table. Dies funktioniert in einigen Browsern nicht richtig, daher hängt es von der Unterstützung Ihres Browsers ab.

Schließlich ist die vielleicht beste Methode die Verwendung flexbox. Die Spezifikation hierfür hat sich einige Male geändert, daher ist sie noch nicht stabil. Aber sobald es fertig ist, wird dies die beste Methode sein, die ich denke.

Zendy
quelle
+1 für den Link zu Chris Coyiers Artikel. Eine Ergänzung zu seiner Liste ist die Methode, die YUIs Pure CSS- Grids verwenden: github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

Ich bevorzuge Inline-Block, obwohl Float auch nützlich ist. Tabellenzellen werden von alten IEs nicht korrekt gerendert (Inline-Block auch nicht, aber es gibt den zoom: 1; *display: inlineHack, den ich häufig verwende). Wenn Sie Kinder haben, die eine geringere Größe als ihre Eltern haben, bringen Floats sie nach oben, während Inline-Block manchmal Fehler macht.

Meistens interpretiert der Browser alles richtig, es sei denn natürlich, es ist IE. Sie müssen immer überprüfen, ob der IE nicht saugt - zum Beispiel das Tabellenzellenkonzept.

In Wirklichkeit läuft es auf persönliche Vorlieben hinaus.

Eine Technik, die Sie verwenden könnten, um Leerzeichen zu entfernen, wäre font-size, dem Elternteil eine 0 zu setzen und dann font-sizeden Kindern das Zurück zu geben , obwohl dies mühsam und grob ist.

Tschad
quelle
Wenn "Sie müssen immer überprüfen, ob der IE nicht saugt", werden Sie immer enttäuscht sein. hehe. (Andererseits sagt er zu Recht, dass Sie immer überprüfen sollten, ob Ihr Code nicht in jeder Version von IE saugt, die Sie unterstützen möchten)
Spudley
4

Nur für den Datensatz, um Spudleys Antwort zu ergänzen, gibt es auch die Möglichkeit, position: absoluteund Ränder zu verwenden, wenn Sie die Spaltenbreiten kennen.

Für mich ist das Hauptproblem beim Chossing einer Methode, ob Sie die Spalten benötigen, um die gesamte Höhe (gleiche Höhen) auszufüllen, wobei Tabellenzellen die einfachste Methode sind (wenn Sie ältere Browser nicht besonders mögen).

Wtower
quelle
0

Ich bevorzuge inline-block, aber floates ist immer noch eine nützliche Möglichkeit, HTML-Elemente zusammenzustellen, insbesondere wenn wir Elemente haben, die man links und rechts halten sollte. Float funktioniert besser, wenn weniger Zeilen geschrieben werden, während Inline-Block in vielen anderen Fällen gut funktioniert .

Geben Sie hier die Bildbeschreibung ein

Alireza
quelle