css - css - 2个子容器不并排放置

Question

我有一个父容器，里面有子容器。2 个子容器分别占据 60% 的宽度和 40% 的宽度。它们没有边距，并且有内边距，但使用 box-sizing 以使其包含在宽度中。但由于某种原因，他们没有并排坐着。如果我将其中一个更改为 39% 宽度，那么它看起来很好。

我究竟做错了什么？

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

Answer 1

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

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

检查这个http://jsfiddle.net/Rcaet/8/

Answer 2

你没有做任何“错误”的事情。你的borders也占了width。所以有边框意味着你需要使盒子更小，因此39%.

Answer 3

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