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当元素在其中浮动时，容器实际上会溢出并自动增长。

JSfiddle 在这里。

.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

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

Answer 3

看看这篇文章：

争夺内联块元素之间的空间

也许你可以float: left;改用？像这样：

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