html - 如何将这些 div 放入 div 中以占据整个水平宽度

Question

如何将这 3 个子框(2 .child，1 .screen)放入父框(.parentDiv)以完美占据水平空间。

我不想使用 javascript 执行此操作。 fiddle供引用，我要的是here

HTML:

<div id="parentDiv">
    <div class="child"></div>
    <div class="child"></div>
    <div class="screen"></div>
</div>​

.screen 元素可以是 before after 或 middle 元素。

CSS:

#parentDiv {width:600px; height:400px; margin:10px auto; border:1px solid #000}

.child {width:100px; border:1px solid blue; float:left; height:100%}
.screen {float:left; border:1px solid red; height:100%;}

.child, .screen {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
​

Answer 1

在 .screen 上，添加 overflow: hidden 并删除 float: left。

参见: http://jsfiddle.net/thirtydot/s3zUd/1/

More information.