6

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

随着使用表格的 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>

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

垂直居中内容

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

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

在表格中，当您将宽度指定为 100% 或固定宽度时，单元格将自动尝试全部为相同宽度，除非图像或块状项目禁止这样做。如何通过浮动 div 实现这一点？好像您说，将所有“单元格”浮动到左侧，您可以指定最小宽度或固定宽度，但我知道没有办法让它们共享一个动态的公共宽度，如表格。在浮动的 div 中，它们本身会缩小到内容的大小。

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

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

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

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

4

4 回答 4

2

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

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

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

--- jsFiddle 演示 ---

于 2012-08-16T16:28:31.233 回答
1

您可以像这样应用CSS；

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

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

并且这里也是分配列的一种解决方法。

希望这可以帮助

注意：不要为子 div 添加百分比属性来div填充父 div（例如，2 个子 div 各占 50%，4 个子 div 各占 25% 等），因为这些因 div 的数量而异，有时无法准确计算

于 2012-08-16T16:23:30.253 回答
1

好吧，我走的是 jQuery 路线... http://jsfiddle.net/dtgEt/1/

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

我的解决方案适用于 IE 7，并且可能适用于 IE 6。如果您想将内容对齐在容器的中心，有很多其他人建议的好方法（击败我）。

于 2012-08-16T17:27:24.910 回答
-1

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

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

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

于 2012-08-16T16:49:31.543 回答