1

我有以下 HTML 和 CSS 代码以及一个JSFiddle 示例

我想知道在调整浏览器窗口大小时是否可以使用vertical-alignCSS 属性来保持具有更多文本的 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; */
}
4

3 回答 3

1

尝试将 .yellow-box 的显示属性更改为...

display: table-cell;
于 2013-05-28T15:41:52.803 回答
0

出于布局目的，表格早已被弃用，但它们仍然适用于表格数据。您的示例似乎是某种表格数据，因此您可以考虑使用表格。否则，您将不得不使用高度：100% height因为黄色框应该可以解决问题。

于 2013-05-28T15:43:53.597 回答
0

vertical-align属性适用于table-cell和inline level元素。inline level表示和。inline_inline-blockinline-table

正如您display: inline-block在divs 上所拥有的（默认为block），您可以使用vertical align.

但我不确定你想要实现什么。

+ w3 | vertical-align

于 2013-05-28T16:09:49.133 回答