CSS à l'aide de pourcentage et de la marge, de remplissage ou de frontière
J'ai un problème que je ne comprends pas.
Si je le pourcentage d'utilisation de la largeur, je m'attends à ce que les éléments de calculer les bordures, les marges ou les rembourrages au sein de leur taille (en pourcentage).
Mais en fait, ces valeurs sont ajoutées à leur taille qui, je l'asume est faux.
C'est mon attente de mal?
Le soufflet montre l'exemple de la question. Les deux "divs", "gauche" et "droite" je m'attends à être sur une seule ligne. Si je supprime "frontière" qu'il fonctionne comme prévu.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
OriginalL'auteur Alex004 | 2011-12-25
Vous devez vous connecter pour publier un commentaire.
Qui est tout à fait normal. Ce n'est pas ce que vous pourriez penser au premier abord, mais le CSS fonctionne de cette manière.
Même sans les pourcentages:
Ce #largeur de la div occupera 140px. Fonctionne de la même pour les pourcentages.
De sorte que vous pourriez avoir besoin intérieure divs pour atteindre ce que vous voulez.
OriginalL'auteur Robin
Ce que vous pouvez faire pour résoudre ce problème est d'utiliser box-sizing. Voir http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
Ne fonctionne pas avec Firefox 27 (la dernière version en date de Mars 2014). Les colonnes de chute à deux lignes.
OriginalL'auteur Marwelln
De remplissage ou de Frontière ajoute toujours à un des éléments de la taille, de l'intérieur.
Marge ne jamais s'ajoute à la taille, mais ajoute de l'espace à l'extérieur de l'élément.
Pourcentages ou définir des valeurs n'a pas d'importance. Le ci-dessus est toujours vrai.
De revoir le modèle de boîte peut vous aider ---> ICI
OriginalL'auteur Scott
Lorsque vous utilisez pourcentage de la largeur (ou la hauteur) des valeurs, ce sont le pourcentage de la largeur (ou hauteur) de la société mère élément de type block (bloc contenant).
OriginalL'auteur Aleks G
Dans super des navigateurs modernes, vous pouvez utiliser calc() pour résoudre ce problème: calc(80% - 2px). Et oui, c'est normal. Si vous définissez la largeur de 100px et des frontières à 150px ce qui allait se passer ensuite, si la frontière n'était pas ajoutée?
OriginalL'auteur powerbuoy