内联块div在边缘底部表现奇怪-Java 学习之路

我试图接近这个设计，我有不同的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只是打印和排版行业的虚拟文本 . 自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房Hello Hello只是印刷和排版行业的虚拟文本 . Lorem Ipsum一直是业界的标准假人 . 你好Hello只是打印和排版行业的虚拟文本Hello Hello只是打印和排版行业的虚拟文本

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

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

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

1 回答

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中看到的那样 .

有一些很酷的例子和如何使用多列的指南：
- http://css.dzone.com/articles/implementing-card-ui-pattern
- http://portfolio.planetjon.ca/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
希望对你有所帮助 .
回复于 2024-04-30T12:15:09+08:00

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

1 回答

相关问题