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
1261 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
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage