Html 如何使带有浮动的div框与动态内容具有相同的高度

在表中，如果有一行，则该行的高度相同，并且该行中的所有单元格都会随动态内容而增长和收缩。（如果一个单元格有大量文本，而其他单元格没有多少文本，那么它们的高度都是相同的，这样可以创建列和行）

随着div float布局的流行，使用表的布局经常受到反对。但是，如何复制表的此功能和其他功能及优点，同时仍将显示设置为“块”，以实现块、跨浏览器的优点

我见过很多黑客，但他们似乎总是太复杂，相互干扰，或采取调整。我正在寻找以下方面的标准可靠方法：

使用包装容器使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{float:left；}
内容1更宽
内容2
具有更多的
高度
内容2
内容2

内容3

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

垂直居中内容

在本例中，使用上述示例，对于任何大小的动态内容，所有内容都将垂直对齐到中间

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

在表格中，当您将宽度指定为100%或固定宽度时，单元格将自动尝试所有单元格的宽度相同，除非图像或类似块的项禁止此操作。如何使用浮动div实现这一点？就像你说的，将所有的“单元格”浮动到左边，你可以指定一个最小宽度或一个固定宽度，但我知道没有办法让它们共享一个共同的动态宽度，比如一个表格。在浮动div中，它们会收缩到内容的大小

如何避免内容推到容器/包装器“行”上，并将其视为一个块

无论出于何种原因，当一个浮动div位于包装器中时，您都会得到奇怪的行为，内容将“粘”到包装器上，就好像它们也是浮动的一样。即使有时在使用

时，我也会发生这种情况

如果你能为我回答所有这些关于浮动潜水艇的问题，我将不胜感激。请不要告诉我把这些问题分成不同的问题，因为它们都与同一件事有关。请不要告诉我这个问题最好在别的地方问。但是，如果您希望有所帮助，那就太好了：）

---

如果解决方案是单独使用

display:table cell

，我已经尝试过了，它会使div不会表现为块，缩小它，背景也会收缩到内容，并且在其他方面它不会表现为块。此外，IE的一些版本不支持这一点，我正在寻找一个跨浏览器的解决方案。谢谢。

您可以这样应用CSS

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

是一个工作现场演示

而也是分发列的一种变通方法

希望这有帮助

---

注意：不要将百分比属性添加到子

div

s以填充父div（例如，两个子div各占50%，四个子div各占25%，等等），因为它们随div的数量而变化，有时无法准确计算，如果希望

div

元素的行为类似于表单元格，您可以这样设置它们的样式：

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

这不依赖于在

.cell

元素上设置

高度

或

最小高度

，因此高度将保持灵活

---

如果您需要表格格式，但必须支持不支持

显示：表格的较旧浏览器，请使用表格。就这么简单

有时一个表是合适的选项，有时它是唯一一个不需要添加一些中等风险的JS或jQuery来模拟表格式的选项

例如，表格（或
显示：表格
，相当于相同的内容）是实现动态内容真正垂直居中的唯一自然方式。这也是为动态内容强制使用等高列的唯一自然方法。一般来说，在需要显示某种数据网格的任何时候，表都是合适的。。。

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

我的解决方案可以在IE7中使用，也可能在IE6中使用。如果您想将内容对齐到容器的中心，有许多其他人建议的好方法（请告诉我）。
这确实有助于第一部分，谢谢：）我也在编辑我的示例，以便更清楚地了解宽度问题。不过有一个警告是，在您的示例中，包装器“行”的高度是固定的，这将导致动态内容出现问题。它改变了问题a的焦点。如果我把问题分解，它会让我自己找到“解决方案”，让它们一起工作，简单地说，不相互干扰。这在大多数情况下确实有用。但是对于IE和per，此处：“注意：IE7和更早版本不支持值“内联表”、“表”、“表标题”、“表单元格”、“表列”、“表列组”、“表行”、“表行组”和“继承”。IE8需要！DOCTYPE。IE9支持这些值。”对于行，最好使用
display:table row
，并使用
display:table
添加一个容器div。这个答案非常合适，但我如何让我的老板或同事理解这一点，而不是对我或我的同事生气