•  02-01-2020
  •  | 
  •  

题

我使用 box-sizing 属性来对齐容器 div 内的左 div、右 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:12px; 或处理它:)

在 这个演示 我刚刚修改过 margin:12px; 为中心元素 margin-top:12px; （就像其他元素一样）。如果您需要边距，则需要对元素的宽度进行一些数学计算！

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

甚至使用 border-box 最终总和为 100%+24像素

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