html - 如何使带 float 的 div 框与动态内容具有相同的高度

Question

在表格中，如果您有一行，则该行的高度相同，并且该行中的所有单元格都随着动态内容而增长和收缩。 (如果一个单元格有大量文本而其他单元格不多，它们的高度都相同，让您可以制作列和行)。

随着 div 的流行，使用表格的 float 布局经常被反对。但是，如何复制表的这个功能和其他功能和优势，同时仍将显示设置为阻塞以获得 block 、跨浏览器的优势？

我见过很多 hack，但它们似乎总是过于复杂、相互干扰或需要调整。我正在为以下内容寻找一种标准的可靠方法:

使用包装容器使 div 框在一行中具有相同的高度

<style>
    .cell { float:left; }
</style>
<div class="row">
    <div class="cell">Content 1 with more width</div>
    <div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
    <div class="cell">Content 3</div>
</div>

在这种情况下，“单元格”类的所有 div 都将具有相同的高度，并且根本不是固定高度并且是 float 的，并且对于任何大小的动态内容都会保持这种状态。

内容垂直居中

在这种情况下使用上面的示例，对于任何大小的动态内容，所有内容都将垂直居中对齐。

使类“cell”的 div 共享基于包装器“row”的公共(public)宽度

在表格中，当您将宽度指定为 100% 或固定宽度时，单元格将自动尝试全部具有相同的宽度，除非图像或类似元素的 block 禁止这样做。如何使用 float div 实现这一点？就像您说的那样，将所有“单元格” float 到左侧，您可以指定最小宽度或固定宽度，但我知道没有办法让它们共享动态的公共(public)宽度，如表格。在 float 的 div 中，它们会缩小到内容的大小。

如何避免内容推送到容器/包装器“行”并将其视为只是一个 block

无论出于何种原因，当 float div 位于包装器内时，您可能会出现奇怪的行为，其中内容将“粘附”到包装器上，就好像也在 float 一样。即使有时使用 <br style="clear:both">最后我遇到了这种情况。

如果您能为我回答所有这些关于 float div 的问题，我们将不胜感激。请不要告诉我将其分解为单独的问题，因为它们都与同一件事相关。请不要告诉我在其他地方问这个会更好。但是，如果您希望提供帮助，那就太好了 :)

如果解决方案使用 display:table-cell单独，我试过这个，它使 div 不表现为一个 block ，缩小它，背景也缩小到内容，并且在其他方​​面它不表现为一个 block 。此外，某些版本的 IE 不支持此功能，我正在寻找跨浏览器解决方案。谢谢。

Answer 1

如果您希望您的 div 元素表现得像表格单元格，您可以这样设置它们的样式:

.row {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  width: 33.33%;
  vertical-align: middle;
  text-align: center;
}​

这不依赖于在 .cell 元素上设置 height 或 min-height，因此高度将保持灵活。

--- jsFiddle DEMO ---