如何防止内联块列中的文本折叠

Question

我正在使用内联块制作一个包含4个div的圆圈。问题在于，当其中一个象限内的文本比相邻象限有更多的行时，它会折叠该相邻象限。我使用table和table-cell显示属性，但我想知道为什么inline-block有这种行为。

示例：http://sassmeister.com/gist/f645ab59f57affc1fea8

.circle-container {
  width: calc(400px + 4em);
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.circle-quad {
  display: inline-block;
  width: 200px;
  height: 200px;
  padding: 1em;
}

.circle-quad--1 {
  border-radius: 100% 0 0 0;
  background: blue;
}

.circle-quad--2 {
  border-radius: 0 100% 0 0;
  background: red;
}

.circle-quad--3 {
  border-radius: 0 0 0 100%;
  background: yellow;
}

.circle-quad--4 {
  border-radius: 0 0 100% 0;
  background: green;
}

<div class="circle-container">

  <div class="circle-quad circle-quad--1">
    <span>
      Headhunting Ativo
    </span>
  </div><!--
--><div class="circle-quad circle-quad--2">
      <span>
        Recrutamento Passivo
      </span>
  </div><!--
  --><div></div><!--
  --><div class="circle-quad circle-quad--3">
    <span>
      Fit Cultural
    </span>
  </div><!--
  --><div class="circle-quad circle-quad--4"><!--
  --><span>
      Talk Session Empresas e Jovens
    </span><!--
  --></div>
  </div>
      

Answer 1

将vertical-align: top;设置为内联块。因为默认值为baseline。

.circle-quad{
  ...
  vertical-align: top;
}