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

Question

我必须将 div 布局为 display: inline-block。有意地，我希望这两个 div(tileImage，title)共享父 div(预览)的 300px 宽度。因此，我将它们的宽度设置为 50%。由于某种原因，第二个 div 被移动到下一行。

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

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

谢谢!

Answer 1

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

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