统一div高度和按钮对齐

Question

我有三个div需要相同的高度，并且的按钮在同一级别，但在按钮上方和下方包含不同数量的文本。

现在我只是指定高度来补偿文本的长度，但是如果它不长，那么填充太多了，它仍然可能不高够了。

这需要与IE9 +以及最新的chrome和firefox一起使用。我开始认为最好的解决方案是javascript，除非有CSS奇迹。 display: flex看起来很有前途，但不认为它会与IE9合作

见下图。标题和按钮之间的空格应由最长的标题控制。现在它只是一个硬编码的高度。同样，卡片高度应该由最高的卡片控制，但它目前是硬编码的。

Answer 1

以下是使用display:table的解决方案，可以帮助您入门：

<强> HTML

<div id="wrapper">         <!-- Sets the size of the entire section -->
  <div id="row1">          <!-- Becomes your table row -->
    <div id="cell1">       <!-- Becomes the table cell -->
      <p>Information</p>
    </div>
    <div id="cell2">
      <p>A section of text</p>
    </div>
    <div id="cell3">
      <p>Some text and other stuff - even divs.</p>
    </div>
  </div>
</div>

<强> CSS

#wrapper {
  height:100%;
  width:100%;
}
#wrapper div {
  border:1px solid black;
}
#row1 {
  display:table;        /* Creates the table */
}
#row1 > div {
  display:table-cell;
  width:30%;            /* Sets the width of each table cell */
  height:auto;          /* Expands the height of the entire row as content is added */
}

这是一个带有模型的 CodePen demo 。关于这一点的好处是你仍然可以使用HTML5和CSS3来完成所有内容和样式。

Answer 2

以下是如何使用<table>而不是div来处理它的示例 - 这样就不需要js：

Table Demo