Question

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

来自小提琴的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

Answer 2

你必须向左浮动它们：

http://jsfiddle.net/65X7X/2/

.container div {
    width: 120px;
    height: 100%;
    display: inline-block;
    float: left;
}

希望这有帮助。

Answer 3

它不是一个错误。你可以在这里看到它为什么会发生以及你如何克服这个问题。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 4

虽然在代码中div之间几乎没有空格，或者使用HTML注释同样有效，但是有一个更好的解决方案。在我看来，最优雅的解决方案，我的意思是不需要弄乱你的代码的外观和可读性的方式，是添加这一行的CSS：

body>.container{font-size:0;}

如果您的body标签不是.container的父标记，请将body替换为父标记。这一行基本上表示样式将应用于.container类，但仅适用于该特定类。不是.container的子元素。因此，通过应用字体大小为0，您可以消除它所产生的间隙，从而使所有内容保持一致。

http://jsfiddle.net/65X7X/6/

基本CSS定位（适合容器中的儿童）

来自小提琴的CSS

4 个答案: