基本CSS定位（容器中装配儿童） [英] Basic CSS positioning (fitting children in container)

问题描述

非常基本的CSS问题。考虑到 http://jsfiddle.net/danwoods/65X7X/ 中显示的代码，为什么不

$ div $ b

Very basic CSS question. Given the code shown in http://jsfiddle.net/danwoods/65X7X/ why don't the child divs (the colored blocks) fit into the container element?

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

提前感谢

Dan

Thanks in advance,
Dan

推荐答案

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

Because inline elements are sensitive to white space. You can remove them so the HTML looks like:

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

jsFiddle示例

jsFiddle example

或浮动左侧的div：

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

jsFiddle示例

jsFiddle example

或使用HTML注释来占据空白区域： / p>

Or use HTML comments to eat up the white space:

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

jsFiddle示例

jsFiddle example

这篇关于基本CSS定位（容器中装配儿童）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！