在表格中,如果您有一行,则该行的高度相同,并且该行中的所有单元格都会随着动态内容而增长和缩小.(如果一个单元格有大量文本而其他单元格不是很多,则它们都是相同的高度,让你创建列和行).
随着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的类"cell"共享一个基于包装"row"的公共宽度
在表格中,当您指定宽度为100%或固定宽度时,单元格将自动尝试所有宽度相同,除非图像或块类似项目禁止此操作.如何通过浮动div实现这一目标？就像你说的那样,将所有"单元格"浮动到左边,你可以指定最小宽度或固定宽度,但我知道无法让它们共享一个动态的公共宽度,就像一个表格.在浮动的div中,它们缩小到内容的大小.
如何避免内容推送到容器/包装器"行"并将其视为只是一个块
无论出于何种原因,当浮动div位于包装器中时,您可以获得奇怪的行为,其中内容将"粘贴"到包装器上,就像浮动一样.甚至有时在最后使用<br style="clear:both">时我也会发生这种情况.
如果你能为我回答所有关于浮动div的问题,我们非常感激.请不要告诉我将其分解为单独的问题,因为它们都与同一事物有关.请不要告诉我,在其他地方会更好.如果你想要帮助很棒:)
如果解决方案display:table-cell单独使用,我已经尝试过这个,它会使div不像块一样,缩小它,背景也会缩小到内容,而在其他方面它不会像块一样.此外,某些版本的IE不支持此功能,我正在寻找跨浏览器解决方案.谢谢.
Mat*_*lin -1
如果您需要表格的格式，但必须支持不支持 的旧版浏览器display:table，那么请使用表格。就是这么简单。
有时，表格是合适的选项，有时，它是唯一可以在不添加一些中等风险的 JS 或 jQuery 来模拟表格格式的情况下工作的选项。
例如，表格（或display:table，相当于同一件事）是动态内容真正垂直居中的唯一自然方式。这也是为动态内容强制执行等高列的唯一自然方法。一般来说，只要您需要显示某种数据网格，表格就很合适。