css - 2个儿童容器没有彼此并排坐着

Question

我有一个父容器，里面有子容器。 2个儿童容器分别占宽度的60％和宽度的40％。它们没有边距，并且它们有填充，但使用盒子大小，因此它包含在宽度中。但由于某种原因，他们并不坐在一起。如果我将其中一个更改为39％宽度，那么它看起来很好。

我做错了什么？

示例可以在http://jsfiddle.net/Rcaet/

看到

Answer 1

您正在使用 display：inline-block ，默认情况下会占用一些空间。为此，您必须使用 font-size：0 黑客。写得像这样：

.parent-container {
    font-size:0;
}
.parent-container > div{
    font-size:16px;
}

选中此http://jsfiddle.net/Rcaet/8/

Answer 2

你没有做任何“错误”。您的borders也会占用width。因此，拥有边框意味着您需要使框更小，因此39%。

Answer 3

你必须添加浮动。将float: left添加到容器2和3中。但是由于某些浏览器中的边框宽度，仍然可能会出现问题。所以，确实减少其中一个方框。