html - 基本 CSS 定位(适合容器中的 child )

Question

非常基本的 CSS 问题。鉴于 http://jsfiddle.net/danwoods/65X7X/ 中显示的代码为什么子 div(彩色 block )不适合容器元素？

来自 fiddle 的 CSS

.container {
    width: 360px;
    height: 50px;
    border: 1px solid black;
}
.container div {
    width: 120px;
    height: 100%;
    display: inline-block;
}
.one {
    background: blue;
}
.two {
    background: green;
}
.three {
    background: red;
}

提前致谢，
丹

Answer 1

因为行内元素对空格敏感。您可以删除它们，使 HTML 看起来像:

<div class="container">
    <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

jsFiddle example

或者让 div 向左浮动:

.one,.two,.three {
    float:left;
}

jsFiddle example

或者使用 HTML 注释来吃掉空白:

<div class="container">
    <div class="one"></div><!--
    --><div class="two"></div><!--
    --><div class="three"></div>
</div>

jsFiddle example