我在处理一些 CSS 时遇到了一个奇怪的问题。两个元素 inline-block
留在同一个容器中。它们都有 width
、height
和 line-height
。
但是如果我们设置第一个元素为空内容,布局就会乱(垂直对齐)。
可以看到问题here
<div class="part">
<div class="foo"></div>
<div class="bar">bar</div>
</div>
.part {
width: 400px;
height: 80px;
background-color: #ddd;
margin-bottom: 100px;
}
.foo {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: red;
}
.bar {
display: inline-block;
width: 100px;
line-height: 80px;
height: 80px;
background-color: green;
}
我知道空内容总是 html 代码的难闻气味。但我只想知道这是为什么以及如何解决这个问题。
我找到了一个 similar question .人们说我们可以使用  
而不是空内容。这是我们解决问题的唯一方法吗?或者我们有其他更好的解决方案?
谢谢。
最佳答案
使用“垂直对齐:中间;”到行内 block 元素
垂直对齐:中间;
http://jsbin.com/ajexab/1/edit
关于vertical-alignment - 内容为空的内联 block 使布局困惑(垂直对齐)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17005352/