Disposition CSS avec largeur fixe à gauche et largeur adaptative à droite_Experience Exchange

Un expert en BI a spécifiquement discuté de cette méthode de mise en page, mais il a utilisé davantage de hacks et a évité le dtd d'IE6. En utilisation réelle, j'ai constaté qu'éviter la définition dtd d'IE6 empêcherait la boîte modale ajax d'être centrée (un contrôle VS, code généré automatiquement, est difficile à modifier). J'ai donc écrit une mise en page simple avec deux colonnes à gauche et à droite, aucun hack n'a été utilisé, c'était très simple, juste pour la pratique.

code CSS : la gauche et la droite sont attachées au côté gauche. Définissez la gauche au-dessus de la droite (z-index) ; ajoutez un calque de contenu (contenu) à l'intérieur de la droite ; définissez la distance du contenu du côté gauche de la droite à 200 px, ce qui est exactement égal à la largeur de la gauche.

Copier le code Le code est le suivant :

* {marge :0 ; ; list- style : aucun ; }
.wrapper {largeur : 100 % ; }
.left {largeur : 200px; arrière-plan : #fcc ; position : gauche ; z-index : 1 }
. droite {largeur:100%;arrière-plan:#ccc; position:absolue;gauche:0}
.content {margin-left:200px;arrière-plan:#ffc; }

Code complet

<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"> <div class="left">Largeur fixe 200px sur le côté gauche</div> <div class="right"> <div class="content"> La bonne largeur s'adapte automatiquement </div> </div> </div>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]