CSS-Layout mit fester Breite links und adaptiver Breite rechts_Erfahrungsaustausch

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> * {margin:0; padding:0; list-style:none; } .wrapper {width: 100%; } .left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 } .right {width:100%; background:#ccc; position:absolute; left:0} .content {margin-left:200px; background:#ffc; } </style> <div class="wrapper">Feste Breite 200 Pixel auf der linken Seite<div class="left"> </div> <div class="right"> Die richtige Breite passt sich automatisch an <div class="content"> </div> </div> </div>
[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]