为什么“display：inline-block”元素在文本换行时变为100％宽度？

Question

我有一个类似投资组合的页面，在网格上显示图像，标题位于其上方。标题设置为内嵌块并具有背景颜色，宽度取决于标题上的长度。 每当标题变得太长而无法放入父文章时，它就会包装到第二行;没问题。 但为什么自动宽度现在导致100％？

.content{
  background: pink;
  width: 33%;
  float: left;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.title{

  position: absolute;
  bottom: 10%;
  left: 0;  
  text-align: center;
}
h2{
  display: inline-block;
  font-family: Arial;
  background: rgba(255,255,255,0.6);

}

实施例： https://jsfiddle.net/6qtw7duf/

Answer 1

Ok..let用简单的术语解释这一点