内联块 div 与 margin-bottom 表现奇怪答案

【问题标题】：inline-block divs acting strange with margin-bottom内联块 div 与 margin-bottom 表现奇怪
【发布时间】：2014-05-19 14:16:48
【问题描述】：

我试图接近这个设计，我有不同的 div 和显示内联块。我试图做的是为所有 div 保持相同的边距底部，但似乎 div 的内容高度会影响每个 div 顶部的空间。

这是代码和css：

.box {
    border: 1px solid red;
    display: inline-block;
    background: #eee;
    margin-bottom: 0.5em;
    width: 48%
}

你好你好

只是印刷排版行业的虚拟文本

你好你好

只是印刷和排版行业的虚拟文本。 Lorem Ipsum 一直是业界标准的虚拟文本自 1500 年代以来，当一位不知名的打印机采用了一种类型的厨房时

你好你好

只是印刷和排版行业的虚拟文本。 Lorem Ipsum 一直是业界的标准假人。

你好你好

只是印刷排版行业的虚拟文本

你好你好

只是印刷排版行业的虚拟文本

在这里您可以看到结果： enter link description here

我不在乎盒子是否有不同的高度，但它们之间的底部空间必须相同。有什么想法吗？非常感谢！

http://fiddle.jshell.net/qyk6t/2/

【问题讨论】：

查看答案并通过单击答案附近的复选框来选择解决您问题的答案。通过这样做，您将帮助像您这样的未来访客！

标签： css multiple-columns

【解决方案1】：

解决此问题的方法之一是使用多列布局。这样，您可以将内容拆分为多列，为每个框保持不同的高度。

.column {
    display : inline-block;
    margin: 0.7em;
    vertical-align: top;
    width: 40%;
}

.box {
    border: 1px solid red;
    background: #eee;
    display : inline-block;
    margin: 0.7em;
    vertical-align: top;
    width: 100%;
}

正如您在JSFiddle 中看到的那样。

关于如何使用多列有一些很酷的示例和指南：

希望对你有所帮助。

【讨论】：

非常感谢@eliezer，我会尝试并告诉你，但似乎这是我可以采用的最佳实践来完成这项工作。