Question

我想按顺序排列三个div：input，break，ouput。而他们的父div是container。我在为这些div应用box-sizing时遇到问题，这是我的css：

html {
    border: groove 8px red;
    margin: 20px;
}

.container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height:75%;
}

.container .input {
    width: 49%;
    height: 100%;
    border: solid 2px red;
    float: left;    
}

.container .break {
    width: 2%;
    height: 100%;
    background: blue;
    float: left;
}

.container .output {
    width: 49%;
    height: 100%;
    border: solid 2px green;
    float: right;
}

Answer 1

您还必须向孩子们申请box-sizing：

.container > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}

Answer 2

CSS的边框属性没有考虑边距。您需要设置0的边距并相应地调整填充，但如果您使用边框，则可能不需要这样做。您可以尝试使用百分比作为保证金，因此它们（宽度加边距）加起来为100％。还要确保子div正在继承box-sizing;您可能需要专门定义。我通常在CSS中设置它：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

最后，摆脱那个.break div。改为使用边距。

Answer 3

你的输出div是否低于你的输入并打破div？那是因为您的边框像素被添加到您的宽度上。

49％+ 2％+ 49％+ 8px的边框（输入每侧2个，输出每侧2个）＆gt; 100％

你必须尝试不同的方法才能让它发挥作用，但降低到48％甚至45％可能会有效。由于您的区域已经左右浮动对了，额外的空间就在中间。

Answer 4

这个简单的三栏布局DEMO

<强> HTML

 <div class="header">header</div>
  <div class="layout">
   <div class="col1">column 1</div>
   <div class="col2">column 2</div>
   <div class="col3">clolumn 3</div>
  </div>
  <div class="footer">footer</div>

<强> CSS

.header, .footer { background: #D5BAE4; }
   .layout { overflow: hidden; }
   .layout DIV { float: left; }
   .col1 { background: #C7E3E4; width: 20%; }
   .col2 { background: #E0D2C7; width: 60%; }
   .col3 { background: #ECD5DE; width: 20%; }

Answer 5

试试这个（赞美_s）。当你给它一个基于％的宽度然后一个基于px的边框时，默认是将它们加在一起，这应该可以解决这个问题。

*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing:         border-box;
}

Answer 6

<强> LIVE DEMO

<强> HTML

<div class="container">
    <div class="input">

    </div>
    <div class="break">

    </div>
    <div class="output">

    </div>
</div>

<强> CSS

html {
    border: groove 8px red;
    margin: 20px;
}
.container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height:75%;
}

.container div{
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container .input {
    width: 49%;
    height: 100%;
    border: solid 2px red;
    float: left;
}
.container .break {
    width: 2%;
    height: 100%;
    background: blue;
    float: left;
}
.container .output {
    width: 49%;
    height: 100%;
    border: solid 2px green;
    float: right;
}

如何让div成为另一个div的孩子？

6 个答案: