Html 如何消除两个div之间的空间？

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

将

div

“title”的宽度更改为

48%

将把div移到

div

“titleImage”旁边。你会注意到中间的空隙。这个空间是从哪里来的？我怎样才能摆脱它

这是JFiddle：

---

谢谢

而不是对两个div使用

显示：内联块

使用，

浮动：左

。

---

看看这篇文章：

也许你可以使用

float:left而不是？比如：

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


并将float:left添加到#preview，以恢复那里的边界。
.preview, .preview div {
    float: left;
}

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