Question

在表格中，如果您有一行，则该行的高度相同，并且该行中的所有单元格都会随着动态内容而增长和缩小。（如果一个单元格有大量文本而其他单元格不是很多，则它们都是相同的高度，让你创建列和行）。

随着div浮动布局的普及，使用表格往往不受欢迎。但是，如何在保持显示集阻止块，跨浏览器的好处的同时复制表的这个和其他功能和好处？

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

使用包装容器在一行中使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都具有相同的高度，并且根本不是固定高度并且是浮动的并且将保持任何大小的动态内容。

垂直居中内容

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

使类“单元格”的div共享一个基于包装“行”的公共宽度

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

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

无论出于何种原因，当浮动div位于包装器内部时，您可以获得奇怪的行为，其中内容将“粘贴”到包装器上，就像浮动一样。即使有时在最后使用<br style="clear:both">时我也会发生这种情况。

如果你能回答所有关于浮动div的问题，我非常感激。请不要告诉我将其分解为单独的问题，因为它们都与同一事物有关。请不要告诉我在其他地方会更好。如果你想要帮助很棒:)

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

Answer 1

如果您希望div元素的行为类似于表格单元格，则可以这样设置样式：

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

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

--- jsFiddle DEMO ---

Answer 2

好吧，我去了jQuery路线...... http://jsfiddle.net/dtgEt/1/

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

我的解决方案适用于IE 7，可能适用于IE 6.如果你想将你的内容对齐在容器的中心，有很多好的方法可以做到别人建议的（打败我）。

Answer 3

您可以像这样应用CSS;

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

Here 是一个有效的现场演示。

和 Here 也是分发列的解决方法。

希望这会有所帮助

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

Answer 4

如果您需要格式化表格，但必须支持不支持display:table的旧版浏览器，请使用表格。这很简单。

有时表是适当的选项，有时它是唯一可以在不添加一些中等风险的JS或jQuery来模拟表格格式的情况下工作的选项。

例如，一个表（或display:table，相当于同一个东西）是实现动态内容真正垂直居中的唯一自然方式。它也是为动态内容强制执行等高列的唯一自然方式。通常，只要您需要显示某种数据网格，就可以使用表格。

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

4 个答案: