Box-Sizing funktioniert nicht

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

  •  02-01-2020
  •  | 
  •  

Frage

Ich verwende die Box-Sizing-Eigenschaft, um das linke Div, das rechte Div und das mittlere Div innerhalb des Container-Div auszurichten.Die Divs stimmen nicht überein.Unten ist der Code, den ich ausprobiert habe.Ich habe auch versucht, px zu verwenden.Ich benutze Firefox, um zu überprüfen.

Ich habe auch in jsfiddle hinzugefügt, 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>
War es hilfreich?

Lösung

generasacodicetagpre.

Andere Tipps

rahmen-Box ist nicht rand-box (was übrigens nicht existiert :) also einfach entfernen margin:12px; oder damit umgehen :)

In diese Demo Ich habe gerade geändert margin:12px; für das Mittelelement zu margin-top:12px; (genau wie die anderen Elemente).Wenn Sie den Rand benötigen, den Sie benötigen, um die Breite Ihres Elements zu berechnen!

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

sogar mit border-box endet mit einer Summe von 100%+24 pixel

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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top