16 exemples de très bons Layouts CSS de base_Basic Tutorial

Une seule ligne et une seule colonne

Une seule ligne et une seule colonne 1 : utilisez float pour flotter dans le coin supérieur gauche, largeur fixe.

#content { float : gauche ; remplissage : 10 px ; marge : 20 px ; arrière-plan : #FFF ; largeur : 400 px ; ""; voice-family:inherit; width: 370px; }html>body #content { width: 370px;

Une seule ligne et une seule colonne 2 : Fixé dans le coin supérieur gauche, largeur fixe, en utilisant un positionnement absolu. #content { position : absolue ; haut : 0px ; gauche : 0px ; marge : 20px ; arrière-plan : #FFF ; largeur : 400px ; -family: "\"}\""; voice-family:inherit; width: 370px;body #content { width: 370px; /* ie5win fudge se termine */ }

Une seule ligne et une seule colonne 3 : Fixe dans le coin supérieur gauche, pas de largeur fixe, utilisez le pourcentage (%) pour définir la largeur à adapter à la page.

Une seule ligne et une seule colonne 4 (recommandé) : largeur fixe, en utilisant l'attribut de centrage (text-align: center;) défini dans le style du corps pour centrer automatiquement la page. Une seule ligne et deux colonnes

Une seule ligne et deux colonnes 1 : Les deux colonnes ont une largeur fixe. La première colonne flotte dans le coin supérieur gauche et la deuxième colonne flotte à droite de la première colonne.

Une seule ligne et deux colonnes 2 : les deux colonnes ont une largeur en pourcentage, mais ne correspondent pas à l'écran. La première colonne est fixée dans le coin supérieur gauche et la deuxième colonne flotte à droite de la première colonne.

Une seule ligne et deux colonnes 3 : les deux colonnes ont une largeur en pourcentage et remplissent l'écran. Les deux colonnes sont en position absolue.

Une seule ligne et deux colonnes 4 : les deux colonnes ont une largeur en pourcentage et remplissent l'écran. La première colonne flotte dans le coin supérieur gauche et la deuxième colonne flotte dans le coin supérieur droit.

Une seule ligne et deux colonnes 5 : les deux colonnes ont une largeur en pourcentage et remplissent l'écran. La première colonne flotte dans le coin supérieur gauche et la deuxième colonne flotte à droite de la première colonne. Une seule ligne et trois colonnes

Une seule ligne et trois colonnes 1 : Les colonnes de gauche et de droite sont positionnées de manière absolue (la colonne de droite est positionnée en haut à droite). Les colonnes de gauche et de droite ont des largeurs fixes et la colonne du milieu s'adapte à la page.

Une seule rangée et trois colonnes 2 : La colonne de gauche est positionnée en haut à gauche, la colonne de droite est positionnée en haut à droite et la colonne du milieu flotte à droite de la colonne de gauche. Les colonnes de gauche et de droite ont des largeurs fixes et la colonne du milieu s'adapte à la page.

Une seule ligne et trois colonnes 3 : Les trois colonnes sont positionnées de manière absolue. Les colonnes de gauche et de droite ont des largeurs fixes, et la colonne du milieu s'adapte en fonction du contenu.

Une seule ligne et trois colonnes 4 (recommandé) : similaire au style 2, sauf que l'attribut margin: 20px est ajouté au style du corps, ce qui résout le problème de la colonne du milieu étant en haut dans Netscape 6.0.

Une seule ligne et trois colonnes 5

 : Les colonnes de gauche et de droite sont positionnées de manière absolue et la colonne du milieu est adaptative. Largeur plein écran.

Trois colonnes dans la rangée du haut

Trois colonnes dans la rangée supérieure 1

(recommandé) : La rangée supérieure s'adapte à la largeur de la page. Les colonnes de gauche et de droite sont positionnées de manière absolue et la colonne du milieu s'adapte à la page.

• Rangée supérieure trois colonnes 2

 : largeur plein écran