内联块div与边距底部表现奇怪

Question

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

这是代码和css：

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

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

只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一家不知名的打印机在打印时使用了一个厨房

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

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

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

在这里您可以看到结果：在这里输入链接描述

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

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

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

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

有一些很酷的例子和指南如何使用多个列：

• http://css.dzone.com/articles/implementing-card-ui-pattern
• http://portfolio.planetjon.ca/2012/12/31/how-to-make-a-flowing-css-gallery-layout/

希望这对你有帮助。