Box-Sizing Ne Fonctionne Pas

StackOverflow https://stackoverflow.com//questions/25091661

  •  02-01-2020
  •  | 
  •  

Question

Je suis l'aide de la boîte de propriété de dimensionnement pour aligner à gauche de la div, droit de la div et du centre de div à l'intérieur du conteneur div.Les div ne sont pas de l'alignement.Ci-dessous le code que j'ai essayé.J'ai aussi essayé d'utiliser px.J'utilise Firefox pour vérifier.

J'ai également ajouté dans jsfiddle, http://jsfiddle.net/F9ds9/

    <!DOCTYPE html>
    <html>
    <head>
    <style> 

    .container{  
        width:100%;         
    }

    #left{
        -moz-box-sizing: border-box;
        margin-top:12px;
        float:left;
        border:1px solid #000000;
        width:20%;
    }

    #right{
        -moz-box-sizing: border-box;
        margin-top:12px;
        float:left;
        border:1px solid #000000;
        width:20%;
    }


    #center{
        -moz-box-sizing: border-box;
        margin:12px;
        float:left;
        border:1px solid #000000;
        width:60%;

    }


    </style>
    </head>
    <body>

    <div class="container">
      <div id="left">LEFT</div>
      <div id="center">CENTER</div>
      <div id="right">RIGHT</div>
    </div>

    </body>
    </html>
Était-ce utile?

La solution 

.container{  
        width:100%;         
    }

    #left{
        -moz-box-sizing: border-box;
        margin-top:12px;
        float:left;
        border:1px solid #000000;
        width:20%;
    }

    #right{
        -moz-box-sizing: border-box;
        margin-top:12px;
        float:left;
        border:1px solid #000000;
        width:20%;
    }


   #center {
    -moz-box-sizing: border-box;
    border: 1px solid #000000;
    float: left;
    margin-top: 12px;
    width: 50%;
}

Autres conseils

border-box n'est pas marge-box (qui d'ailleurs n'existe pas :) il suffit donc de retirer margin:12px; ou de traiter avec elle:)

Dans cette démo Je viens de modifier margin:12px; pour le centre de l'élément de margin-top:12px; (tout comme les autres éléments).Si vous avez besoin de la marge que vous avez besoin de faire quelques calculs au sujet de votre élément de largeurs!

 _____    _____________    _____
  20%  12px    60%    12px  20%

même en utilisant border-box les extrémités jusqu'à une somme de 100%+24px

The box-sizing:border-box or whatever box sizing you are using the box model is

width + padding + border = actual visible/rendered width of an element's box,
height + padding + border = actual visible/rendered height of an element's box.

See this demo https://css-tricks.com/box-sizing/#demo adding excess margin to child will make this property useless

Please Check the fiddle

<body>
    <div class="container">
        <div id="left">LEFT</div>
        <div id="center">CENTER</div>
        <div id="right">RIGHT</div>
    </div>
</body>

There are some things which you should know

Total:100% for the container Left and right :20% Center :60%

so total 100% will come inside the container

and on top of that you have given border

so it will add extra 6px for the three container making it exceed more than the 100% width of container so the right section will jump down.

And for center container you have not given margin top

Please refer CSS box modelling you will understand. and use firbug in firefox for debugging it will be easier.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top