如何摆脱两个div之间的空间？

Question

我必须将divs布局为显示：inline-block。故意，我希望这两个div（tileImage，title）共享父div（预览）的300px宽度。因此，我将它们的宽度设置为50％。由于某种原因，第二个div被移动到下一行。

将div“title”的宽度更改为48%会移动div“titleImage”旁边的div。你注意到它们之间的空间。这个空间来自哪里？我该如何摆脱它？

这是JFiddle：http://jsfiddle.net/SFDPe/2/

谢谢！

Answer 1

您应该将元素向左和向右浮动。然后，确保将height: auto;和overflow: auto;设置为父容器。这可以确保.parent容器在元素浮动时实际溢出并自动增长。

JSfiddle here.

.preview {
    width: 300px;
    border: 1px solid red;
    vertical-align: top;
    height: auto;
    overflow: auto;
}

.title {
    width: 50%;
    background-color: olive;
    float: right;
}

.tileImage {
    width: 50%;
    background-color: orange;
    float: left;
}

Answer 2

而不是display:inline-block使用，float:left用于两个div。 http://jsfiddle.net/SFDPe/3/

Answer 3

看一下这篇文章：

Fighting the Space Between Inline Block Elements

也许您可以使用float: left;代替？像this：

.preview, .preview div {
    float: left;
}