html - 如何使 div 作为另一个 div 的子元素？

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

您还必须对 child 应用 box-sizing:

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