Die Kompatibilität des Browsers war immer ein häufiges Problem im CSS -Layout.
Diese beiden Methoden haben die folgenden Vorteile:
1.. Es ist nicht erforderlich, Hack zu verwenden
2. Einfach und effektiv, können Sie es auf einen Blick tun
3.. Hierarchisches und modulares Layout
4.. Der Code ist vernünftiger und leichter zu identifizieren
Methode 1: Lösen
Normalerweise müssen wir Float verwenden, um das Multi -Column -Layout zu erzielen.
Um diesen Effekt zu erzielen, werden wir den Rand hinzufügen, um die Spalte direkt aus dem Abstand zu erzeugen und auch Grenzen zu fügen, und die Polsterung, damit der Text im Inneren nicht an den Rand haftet. Aber eine unerwartete Situation geschah.
Laufen Sie in der dritten Spalte nach unten. Dies ist nicht der Effekt, den Sie wollen. Dann analysieren wir es. Nach allgemeinen Ideen. Die Gesamtbreite beträgt 800px, die linke Spalte ist 200, die mittlere 400 und die rechte Spalte 200, was gut aussieht, aber es muss zwischen diesen Spalten abgeschaltet werden. Daher müssen Sie sie ändern: Linksspalte 190, Middle 400, Und die rechte Spalte 190. Ist es in Ordnung?
Aber aus guten Aussehen haben Sie Grenzen hinzugefügt. Ich habe jedoch vergessen, dass der Rand auch die Breite erhöht. -Border 2 = 168, um nicht falsch ausgerichtet zu werden. Aber finden Sie es nicht ein bisschen kompliziert? Ein solches Layout einiger Browser wird eine Lücke geben.
Okay, lass uns über meine Methode sprechen. Nach der Hierarchie trenne ich das Layout und die Anzeige. Das Layout ist, dass zusätzlich zur Breite und der schwebenden äußeren Tonhöhe das Layout leichter zu berechnen ist. Dann fügen wir in der Spalte des Layouts einen Div hinzu, um den Rand, den internen und externen Abstand usw. anzuzeigen. Sie können die Breite nicht definieren, Sie können sich anpassen. Um Ihr Gedächtnis zu erleichtern, habe ich ein Gedicht improvisiert: Die feste Breite sollte schwimmend sein, ohne Grenzen oder Flecken, ein DIV einlegen und den Stil definieren, um zu arbeiten!
Methode 2: Lösen Sie die internen schwebenden Elemente aus der Außenschicht
Um einen Produktkatalog oder ein Bildalbum zu erstellen, haben wir UL- oder N -Divs verwendet, um zu schweben.
Aber die Dinge stehen vor ihren Wünschen.
Die Lösung dafür ist eigentlich sehr einfach.
1. Sie können einen Float hinzufügen: links;
2. Eine andere Methode besteht darin, eine DIV zu platzieren, um das Schwimmen am Ende nach dem Ende des Schwimmers zu löschen.
3. Fügen Sie der äußeren Schicht Höhe oder Breite hinzu.