使用vertical-align屬性將div對齊到兄弟姐妹的頂部和底部（將div保持相同的高度）

Question

我有以下HTML和CSS代碼以及一個JSFiddle示例

我想知道是否可以使用vertical-align CSS屬性來使調整瀏覽器窗口大小時具有更多文本的div與其他div對齊。 當前，當調整瀏覽器窗口的大小時，具有更多文本的div將向下或向上擴展，這取決於vertical-align設置為top還是bottom 。

換句話說，帶有更多文本的div的高度會增加，而其他則不會。 如何在不設置height屬性的情況下保持黃色div的高度相等？

<div class="red-box">
  <div class="yellow-box">
    <img src="">
     <h1>heading one</h1>

    <p>Little text one</p>
  </div>
  <div class="yellow-box">
    <img src="">
     <h1>heading two</h1>

    <p>Little text two</p>
  </div>
  <div class="yellow-box">
    <img src="">

     <h1>heading three</h1>

    <p>Lots of text that
        just keeps on going and going</p>
  </div>
</div>

和CSS：

.red-box {
  background:red;
}

.yellow-box {
  background: yellow;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-block;
  width: 33%;
  text-align: center;
  vertical-align: bottom;
  /* vertical-align: top; */
}

Answer 1

嘗試將.yellow-box的display屬性更改為...

display: table-cell;

Answer 2

長期以來，出於布局目的不建議使用表，但對於表格數據仍然很有用。 您的示例似乎是某種表格數據，因此您可以考慮使用表。 否則，您將不得不使用高度：黃色框的100% height應該可以解決問題。

Answer 3

vertical-align屬性適用於table-cell和inline level元素。 inline level是指inline ， inline-block和inline-table 。

如您所display: inline-block div上的display: inline-block （默認為block ），可以使用vertical align 。

但是我不確定您想要實現什么。

+ w3 | vertical-align