Gedanken zu Float und Inline-Block

schweben

Vorteile:

Die horizontale Anordnung ist bequemer und es gibt kein Problem mit der Browserkompatibilität.

Nachteile:

1) Wenn mehrere Reihen horizontal angeordnet sind, kann die oberste Reihe nach dem Umbrechen oft nicht angezeigt werden.

2) Nach dem Floating springt es aus dem aktuellen Fluss, wodurch das übergeordnete Element stark zusammenbricht. Die Lösung ist relativ ausgereift und einheitlich und es gibt kein Problem mit der Browserkompatibilität.

Inline-Block

Nachteile: Das größte Problem besteht darin, dass die Methoden zum Lösen weißer Lücken unter verschiedenen Browsern unterschiedlich sind, was schwer zu vereinheitlichen ist und eine schlechte Kompatibilität aufweist. Eine gängige Lösung besteht darin, „font-size:0“ für das übergeordnete Element festzulegen; die meisten Browser können dies tun, und für einige, die dies nicht tun, können Sie display:table hinzufügen, ohne das Layout zu beeinflussen. Persönlich mag ich die Verwendung von Buchstaben- und Wortraum nicht. Ich habe immer das Gefühl, dass verschiedene Browser unterschiedliche Probleme haben.

Vorteile: Die oberste Zeile wird angezeigt, wenn die Zeile umbrochen wird. Sie können text-align, white-space und andere Attribute verwenden, um beide Seiten auszurichten, und der Effekt ist großartig :nowrap kann die Zeile nicht umbrechen, manchmal hat es wundersame Wirkungen.

Schreiben Sie dies zuerst und fügen Sie weitere hinzu, wenn Sie Zeit haben