Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > CSS-Layout mit fester Breite links und adaptiver Breite rechts_Erfahrungsaustausch

CSS-Layout mit fester Breite links und adaptiver Breite rechts_Erfahrungsaustausch

WBOY
Freigeben： 2016-05-16 12:04:42
Original
1278 Leute haben es durchsucht

Ein BI-Experte diskutierte speziell diese Layout-Methode, verwendete jedoch mehr Hacks und vermied die dtd von IE6. Bei der tatsächlichen Verwendung habe ich festgestellt, dass das Vermeiden der dtd-Definition von IE6 dazu führt, dass die Ajax-Modalbox nicht zentriert werden kann (ein VS-Steuerelement, automatisch generierter Code, ist schwer zu ändern). Also habe ich ein einfaches Layout mit zwei Spalten links und rechts geschrieben. Es war sehr einfach, nur zum Üben.

CSS-Code: Sowohl links als auch rechts sind an der linken Seite angehängt. Legen Sie links über rechts fest (Z-Index); fügen Sie eine Inhaltsebene (Inhalt) innerhalb der rechten Seite hinzu. Stellen Sie den Inhaltsabstand von der linken Seite von rechts auf 200 Pixel ein, was genau der Breite von links entspricht.

Code kopieren Der Code lautet wie folgt:

* {margin:0; padding:0 ; list- style:none; }
.wrapper {width: 100% }
.left {width:200px;position:left:0 ;z-index:1 } 🎜>.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }

Vollständiger Code


[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]
Verwandte Etiketten：
css
Quelle：php.cn
Vorheriger Artikel：So stellen Sie sicher, dass IE ff Opera gleichzeitig Alpha-Transparenz unterstützt_Erfahrungsaustausch Nächster Artikel：IE6 unterstützt position:fixed perfect Solution_Experience Exchange
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Ändern Sie die Deckkraft des Bildes, wenn Sie eine Option aus dem Formular auswählen Wie kann ich die Deckkraft des idMaster-Bildes auf 1 ändern, wenn ich die Option mit dem W...
Aus 2024-04-03 23:00:48
0
2
304
So positionieren Sie ein Div neben einer Seitenleiste, sodass das Div beim Öffnen der Seitenleiste nach links verschoben wird Immer wenn ich die Seitenleiste öffne, wird das Hauptinhalts-Div unterhalb der Seitenleist...
Aus 2024-04-03 14:47:21
0
1
325
Responsives Bild und Text Div nebeneinander Ich versuche also, eine Vorlage zu erstellen, bei der ein Div ein Bild und das andere Text...
Aus 2024-04-02 08:59:38
0
1
349
Mein Anfragetext zum Testen der Registrierungsfunktionalität mit Postman kann nicht ausgefüllt werden *BEHOBEN* Ich entwickle eine sehr einfache Social-Media-Anwendung, mit der sich Benutzer registriere...
Aus 2024-04-01 10:09:37
0
1
348
Einfaches HTML ohne CSS: Colspan funktioniert im th/td nicht richtig, konsistent über alle Zeilen hinweg Ich verstehe nicht, warum mein Colspan nicht funktioniert. Ich habe eine CSS-Lösung, bin m...
Aus 2024-03-31 17:28:21
0
1
325
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage