Question

我有以下HTML和CSS代码以及JSFiddle example

我想知道在调整浏览器窗口大小时是否可以使用vertical-align CSS属性来保持包含更多文本的div与其他div对齐。目前，在调整浏览器窗口大小时，具有更多文本的div会向下或向下延伸，具体取决于vertical-align是设置为top还是bottom。

换句话说，具有更多文本的div的高度增加而其他文本没有增加。如果不设置高度属性，如何保持黄色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: 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（默认为block），则可以使用vertical align。

但我不确定你想要达到什么目的。

+ w3 | vertical-align

使用vertical-align属性将div与兄弟姐妹的顶部和底部对齐（保持div的高度相同）

3 个答案: