Mise en page CSS – largeur et largeur maximale
Utilisation de la largeur, de la largeur maximale et de la marge : auto ;
Comme mentionné dans le chapitre précédent; un élément de niveau bloc occupe toujours toute la largeur disponible (il s’étend aussi loin que possible vers la gauche et la droite).
Réglage de la width d’un élément de niveau bloc l’empêchera de s’étendre jusqu’aux bords de son conteneur. Ensuite, vous pouvez définir les marges sur auto, pour centrer horizontalement l’élément dans son conteneur. L’élément occupera la largeur spécifiée et l’espace restant sera réparti également entre les deux marges :
Cet élément
Note: Le problème avec le <div> ci-dessus se produit lorsque la fenêtre du navigateur est plus petite que la largeur de l’élément. Le navigateur ajoute alors une barre de défilement horizontale à la page.
En utilisant max-width au lieu de cela, dans cette situation, améliorera la gestion des petites fenêtres par le navigateur. Ceci est important pour rendre un site utilisable sur de petits appareils :
Cet élément
Conseil: Redimensionnez la fenêtre du navigateur à moins de 500px de large, pour voir la différence entre les deux divs !
Voici un exemple des deux div ci-dessus :
Exemple
div.ex1 {
largeur : 500 pixels ;
marge : automatique ;
bordure : solide 3px #73AD21 ;
}
div.ex2 {
largeur maximale : 500 px ;
marge : automatique ;
bordure : solide 3px #73AD21 ;
}
Essayez-le vous-même »
#Mise #page #CSS #largeur #largeur #maximale