为什么我的内联块div在没有对齐时只有其中一个有文本？

Question

  

实时网页here。

鉴于此HTML页面：

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

我希望我的两篇文章都是一致的，但正如下面的屏幕截图中所示，只有当我的两篇文章都有文字时，<article>元素才会对齐：

任何想法导致此行为的原因以及如何解决？

Answer 1

添加：

vertical-align: bottom;

你的第二条规则应该让它发挥作用。显然，没有文本的内联块会呈现为内嵌图像或其他内容，并且这些元素的垂直对齐方式不正确，因此强制它们与底部对齐可以解决问题。

来源：inline-block element with no text renders differently

Answer 2

这是CSS中“基线”垂直对齐的结果。来自CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

  

基线

     

    

将框的基线与父框的基线对齐。 如果是框     没有基线，将底部边缘边缘与父母的基线对齐。（我的重点）

  

因为内联块的默认对齐方式是“基线”，除非被覆盖，否则此规则适用。当文本放在内联块中时，该文本将为内联块创建基线，并应用第一个（非粗体）句子。

当内联块中没有文本时，它没有基线，所以第二个（粗体）句子适用。

在这里的JSFiddle：http://jsfiddle.net/WjCb9/1/我已经从你的例子中删除了margin:1em正在创建（至少对我来说）一种误导性错觉，并添加了文本baseline来显示包含框的基线是。基线位于单词“baseline”的底部，因此您可以看到空内联块的底部边缘边缘与上面CSS规则所要求的父级基线对齐。

Answer 3

克隆this

将垂直对齐添加到文章：

section[role=main] article { 
  ...
  vertical-align: middle;
}

http://jsbin.com/oqodol/6/edit

Answer 4

inline-block元素由其父级的text-align定位。

如果块内没有文本，则无需对齐。

您可以使用display: block;和float来解决此问题，或者我的建议是使用伪元素插入一个不间断的零宽度空间：

section[role=main] article:before {
  content: "\2060";
}

Demo