如何使div框与浮动具有相同的高度与动态内容 [英] How to make div boxes with floats have the same height with dynamic content

问题描述

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

In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).

随着div的流行使用表的浮点布局经常被皱眉。但是，我如何重复这个和其他功能和好处的一个表，同时仍然保持显示设置为阻止块，跨浏览器的好处？

With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?

看到许多黑客，但他们总是似乎太复杂，相互干扰，或采取调整。我正在为以下内容寻找一个标准可靠的方法：

I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:

使div框跨包含容器的行具有相同的高度

Make div boxes the same height across a row with a wrapping container

<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都将具有相同的高度，

In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.

垂直居中的内容

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

In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.

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

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

In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.

如何避免内容压入容器/包装器行它只是一个块。

无论什么原因，当一个浮动div在一个包装器内，你可以得到奇怪的行为，内容将粘贴如果浮动太。即使有时当使用< br style =clear：both> 时，也会发生这种情况。

For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.

如果你能回答关于浮动div的所有这些问题对我来说是非常感谢。请不要告诉我把它分成单独的问题，因为它们都与同样的事情有关。请不要告诉我这将更好地问别的地方。如果你希望有帮助的伟大:)

If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)

如果解决方案使用 display：table-cell 我试过这个，它使得div不像一个块，收缩，背景收缩到内容，在其他方式，它不表现为一个块。另外一些版本的IE不支持这个，我正在寻找一个跨浏览器的解决方案。谢谢。

If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.

推荐答案

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

If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.

有时候一个表是合适的选项，有时它是唯一的选项，将不工作，不添加一些中等风险的JS或jQuery来模拟格式化表。

Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.

例如，一个表（或 display：table ）是动态内容的真正垂直居中的唯一自然方式。它也是为动态内容强制使用等高列的唯一自然方式。一般来说，每当需要显示某种数据网格时，表格是合适的。

For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.

这篇关于如何使div框与浮动具有相同的高度与动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！