ボックスサイズが働いていません

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

  •  02-01-2020
  •  | 
  •  

質問

ボックスサイズ設定プロパティを使用して、左のDIV、右のDIV、CENTER DIVをコンテナDIV内に配置しています。DIVは整列していません。以下は私が試したコードです。私はPXを使ってみました。私はFirefoxを使ってチェックしています。

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>
.

役に立ちましたか？

解決 

.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%;
}
.

他のヒント

ボーダーボックスは、 margin-box ではありません（これは存在しません：）margin:12px;を削除するか、またはそれに対処するだけです。）

このデモ Center要素のmargin:12px;を修正しました。margin-top:12px;（他の要素と同じように）。あなたがあなたの要素の幅に関していくつかの数学をする必要があるという余白が必要な場合！

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

border-boxを使用しても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.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top