Question

我正在使用box-sizing属性来对齐容器div中的left div，right div和center 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>

Answer 1

border-box 不是 margin-box （顺便说一下，不存在:)所以只需删除margin:12px;或处理它：）< / p>

在 this demo 中，我刚刚将margin:12px;的中心元素修改为margin-top:12px;（就像其他元素一样）。如果您需要保证金，您需要对元素的宽度进行一些数学计算！

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

即使使用border-box也会达到100％+ 24px 的总和

Answer 2

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

Answer 3

<TextField onChange={event => this.handle(event.nativeEvent.text)} label='Amount' value={this.state.amount} keyboardType = 'numeric' enablesReturnKeyAutomatically={true}> </TextField> handle(value){ if(/^\d+$/.test(value)) this.setState({amount: value}) }或任何使用盒子模型的大小调整框

box-sizing:border-box

查看此演示https://css-tricks.com/box-sizing/#demo 为孩子增加多余的保证金将使这个财产无用

Answer 4

请查看fiddle

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

有些事情你应该知道

总计：容器的100％左右：20％中心：60％

所以总容量100％将进入容器

并且最重要的是你给了边框

因此它将为三个容器增加额外的6px，使其超过容器的100％宽度，因此右侧部分将跳下来。

对于中心容器，你没有给出保证金顶部

请参考您将理解的CSS框建模。并在firefox中使用firbug进行调试会更容易。

盒子大小不起作用

4 个答案: