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

【问题标题】：How to get rid of the space in between two divs?如何摆脱两个div之间的空间？
【发布时间】：2013-08-03 11:43:26
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

看看这篇文章：

Fighting the Space Between Inline Block Elements

也许您可以改用float: left;？赞this：

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

【讨论】：

并将 float:left 添加到 #preview 以恢复那里的边框。