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

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/

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/

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/

Anzeige: Inline-Block;

Scheint sich genau so zu verhalten display:inline;.

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

Anzeige: Tabellenzelle;

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

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.

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.

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.

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.

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.

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).

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 .