Hello Hello

Question

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

这里是代码和css：

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

Hello Hello

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

Hello Hello

只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本   自16世纪以来，当一个未知的打印机采取类型的厨房

Hello Hello

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

Hello Hello

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

Hello Hello

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

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

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

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

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

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

希望对你有所帮助。

内联块div在边缘底部表现奇怪

Hello Hello

Hello Hello

Hello Hello

Hello Hello

Hello Hello

1 个答案: