如何使使用浮动的 div 盒子在动态内容下具有相同的高度

Question

在表格中，如果你有一行数据，该行数据的高度相同，并且该行中的所有单元格都会随着动态内容的增长和缩小而增长和缩小。 (如果一个单元格有大量文本，而其他单元格没有多少，它们的高度都是相同的，让你可以创建列和行)。

随着div浮动布局的流行，使用表格通常被认为是不好的。然而，我如何在仍然保持显示设置为块状的情况下复制这个和其他表格的功能和好处，以实现跨浏览器呢？

我看到了许多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>

在这种情况下，所有类名为“cell”的div都会具有相同的高度，不是固定的高度，而且会浮动，并且对于任何大小的动态内容都将保持不变。

垂直居中内容

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

使类名为“cell”的div共享基于包装器“row”的公共宽度

在表格中，当您将宽度指定为100％或固定宽度时，除非图像或阻止此项的块，否则单元格将自动尝试所有具有相同的宽度。如何通过浮动的div实现这一点？因为如果你说，将所有“cell”向左浮动，你可以指定一个最小宽度或固定宽度，但我不知道如何让它们共享一个动态的通用宽度，就像一个表格。在浮动的div本身中，它们会缩小到内容的大小。

如何避免内容推向容器/包装器"row"并将其视为块

出于某种原因，当浮动的div在包装器内部时，您可能会获得奇怪的行为，其中内容将像浮动一样“粘”在包装器上。即使有时在结尾处使用<br style="clear:both">，我也遇到过这种情况。

如果您可以为我回答所有关于浮动div的问题，那将不胜感激。请不要告诉我将其分成单独的问题，因为它们都与同一件事相关。请不要告诉我这样问别处会更好。但如果您愿意提供帮助，那就太好了 :)

如果解决方案只是使用display:table-cell，我已经尝试过了，它使div的行为不像块，缩小它，背景也会缩小到内容中，在其他方面它也不表现为块。此外，某些版本的IE不支持此功能，因此我正在寻找跨浏览器的解决方案。谢谢。

- user1521604

Answer 1

如果你想让你的

元素表现得像表格单元格一样，你可以对它们进行样式设置：

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

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

--- jsFiddle 演示 ---

- jackwanders

---

这在大多数情况下是有帮助的。然而，对于IE和根据此处：http://www.w3schools.com/cssref/pr_class_display.asp，“注意：值“inline-table”，“table”，“table-caption”，“table-cell”，“table-column”，“table-column-group”，“table-row”，“table-row-group”和“inherit”在IE7及更早版本中不受支持。IE8需要一个！DOCTYPE。IE9支持这些值。” - user1521604

最好使用 display:table-row 来定义行，然后添加一个带有 display:table 的容器 div。 - Matt Coughlin

Answer 2

好的，我选择了jQuery路线... http://jsfiddle.net/dtgEt/1/

我想指出的是，虽然有些人会使用表格，但表格是用于显示表格数据而不是布局。div没有语义意义，因此在我看来它是更好的选择（除非您实际上要发布到Web上的是表格数据）。

我的解决方案适用于IE 7，可能也适用于IE 6。如果您想将内容对齐到容器的中心，有许多其他人建议的好方法（比我先想到了）。

- jonathanbell

---

难道不能提出同样的论点，即浮点数在布局方面并不具有语义吗？作为一个起源于让文本环绕图像的想法，使用浮点的想法是否有些强制呢？而且，使用JavaScript来复制其他本地元素中已经存在的功能，也是一种强制吗？事实上，我们没有用于布局目的的元素，所以我们只能将就着用。我仍然在等待它成为HTML在所有浏览器中的标准实现，或者是CSS属性。顺便说一下，我查看了这个页面的源代码，对于列，它使用td。 - user1521604

我确实给了你一个赞，因为我欣赏辛勤的工作和精心编写的示例，谢谢 :) 谁知道也许有一天我会需要用到它。 - user1521604

哈！这很有趣，它使用td作为列！是的，我同意你的看法 - 我认为我们在同一页面上。在我的理想世界中，JS用于脚本/功能（而不是像我使用它那样的布局），HTML是语义，CSS是布局。- 感谢您的支持！ :) - jonathanbell

Answer 3

您可以这样应用CSS；

.row{
    height: 200px;
}
.cell{
    display:block;
    float:left;
    height:100%;
}

这里是一个可工作的实时演示。

而这里则是分发列的解决方法。

希望这可以帮到您

注意：不要将百分比属性添加到子div中以填充父div（例如，对于2个子div，每个占50％，对于4个子div，每个占25％等），因为这些属性根据div的数量而变化，有时无法准确计算。

- Alfred

---

它确实对第一部分有所帮助，谢谢 :) 我也正在编辑我的示例，以使宽度问题更清晰。但需要注意的是，在您的示例中，包装器“row”具有固定高度，这将导致动态内容出现问题。 - user1521604

我认为你可以在SO上提出另一个问题。这会大大改变问题的焦点。 - Alfred

如果我将问题分解开来，那么我就需要自己找到“解决方案”，使它们能够简单地协同工作，而不会相互干扰。 - user1521604

Answer 4

如果您需要表格的格式，但必须支持不支持display:table的旧浏览器，则使用表格。就是这么简单。

有时候，表格是适当的选择，有时候它是唯一的选择，而不需要添加一些中等风险的JS或jQuery来模拟表格的格式。

例如，表格（或display:table，其实质相同）是具有真正垂直居中动态内容的唯一自然方式。它也是强制动态内容具有相等高度列的唯一自然方式。总的来说，表格在任何需要显示某种数据网格的情况下都是合适的。

- Matt Coughlin

---

这个答案非常合适，但是我该如何让我的老板或同事理解这一点，并且不因为我使用表格而生气或看不起我，因为这才是真正的问题 :) 当面对群体思维并拥有独立想法时，仅凭实际操作可能很难找到工作。 - user1521604

对于老板来说，如果使用表格而不是试图让浮动的 div 行为像表格一样，那么很可能需要更少的时间和更容易维护（翻译：工作完成得更快，预算中使用的资金更少）。 - Matt Coughlin

那么对于真正丑陋的情况呢，同行们想要与那些思维方式与他们相同的人合作呢？如果即使向他们展示这个答案，他们会生气而不是理解，那该怎么办呢？ - user1521604

就同行而言，如果他们认为使用表格（或display:table）来实现表格的格式不合适，那么他们并不像他们想象的那样懂得多 :-) - Matt Coughlin