Detaillierte Erläuterung der adaptiven HTML-Layoutlösung mit fester linker und rechter Breite in der Mitte

In diesem Artikel wird die detaillierte Erklärung der adaptiven HTML-Layoutlösung mit fester linker und rechter Breite in der Mitte vorgestellt und wie folgt mit allen geteilt:

Die HTML-Struktur ist wie folgt

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> // Seien Sie hier zuerst vorsichtig Linke und rechte schwebende Elemente werden gerendert, bevor das mittlere Element gerendert wird. Nachdem das Element schwebend ist, nehmen die verbleibenden Geschwisterelemente auf Blockebene die Breite des übergeordneten Elements <style> .box{ height:200px } .left{ float:left; } .right{ float:right ein ; width:300px; } </style>

Die HTML-Struktur ist wie folgt

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Gleich wie schwebendes Layout, Rendern Sie zunächst die linken und rechten Elemente so, dass sie am linken und rechten Ende des übergeordneten Elements positioniert sind und die verbleibenden mittleren Elemente die verbleibende Breite des übergeordneten Elements einnehmen. <style> .box{ position: relative; } .left{ position: absolute; width: 0 } .right{ position: absolute; ; Hintergrund: rot; </style>

Durch Einfügen des übergeordneten Elements display:table und des untergeordneten Elements display:table-cell wird daraus ein Inline-Block.

Der Vorteil dieses Layouts ist die gute Kompatibilität.

 <div class=box> <div class=left> links </div> <div class=center> Mitte </div> <div class=right> rechts </div></div><style> .box{ Anzeige : Tabelle; Breite: 100%; .left{ Anzeige: Tabellenzelle; 100 %; Hintergrund: rot;

Anzeige des übergeordneten Elements: Flex-untergeordnete Elemente werden alle in einer Reihe angeordnet.

Die Breite von flex:n im untergeordneten Element entspricht der Breite des übergeordneten Elements/n

Beispiel: Flex:1, die Breite entspricht der Höhe des übergeordneten Elements.

Der Nachteil des elastischen Layouts besteht darin, dass seine Kompatibilität derzeit nicht hoch ist.

 <div class=box> <div class=left> links </div> <div class=center> Mitte </div> <div class=right> rechts </div></div><style> .box{ Anzeige : flex; width: 100%; } .left{ width: 0; } .right{ width:100px;

Anzeige des übergeordneten Elements: Gitter;

Rastervorlagenspalten: 100 Pixel automatisch 100 Pixel;

Das erste untergeordnete Element ist der Reihe nach 100 Pixel breit, das zweite ist adaptiv und das dritte ist 100 Pixel breit.

Der Vorteil des Rasterlayouts besteht darin, dass es äußerst einfach ist und direkt vom Stil des übergeordneten Elements bestimmt wird. Der Nachteil besteht darin, dass seine Kompatibilität nicht hoch ist.

 <div class=box> <div class=left> links </div> <div class=center> Mitte </div> <div class=right> rechts </div></div><style> .box{ Anzeige : Grid; Grid-Template-Columns: 100px Auto 100px; Breite: 100%;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.