HTML / CSS：可以百分比宽度divs总是完全填充他们的父容器（就像表格单元格一样）？ [英] HTML/CSS: Can percentage width divs always completely fill their parent container (like a table cell does)?

问题描述

我想知道是否有可能让各种百分比的div填充其父容器，就像表格单元格将始终填满行的宽度，即使百分比需要四舍五入。

以下是使用表格的理想效果：

如果可以的话，我真的更喜欢在我的特定应用程序中使用div。

感谢！

编辑： div示例似乎可以在某些分辨率下工作。如果在水平调整浏览器窗口大小的同时查看每个示例，问题就很明显。在你的div例子中，添加一些更多的3字符串， s到你的百分比的末尾有一点帮助。

另一个CSS方法是CSS3 flex-box声明。 JSFiddle webkit-only示例。不幸的是，浏览器支持并不好（没有IE），但它非常漂亮干净的方式来实现你所需要的。

编辑： John Resig撰写的一篇很好的文章讨论了这个问题以及使其完美的困难，尽管它没有提供任何额外的指导。

I would like to know if it is possible to have divs of various percentages fill their parent container completely like how table cells will always fill the width of their row even when the percentages need to be rounded.

Here is the desired effect using a table: http://jsfiddle.net/Tq9mJ/1/

Here is what happens when using divs with the same percentage: http://jsfiddle.net/fDVwB/1/

I would really prefer to use divs in my specific application if it is possible.

Thanks!

Edit: The div example appears to work at some resolutions. The problem is apparent if you look at each example while horizontally resizing your browser window. The table cells consitantly fill while the divs sometimes leave empty space.

解决方案

In your div example, adding a few more "3"s to the end of your percentage helped a little bit.

Another CSS method would be with CSS3 flex-box declarations. JSFiddle webkit-only example here. Unfortunately, browser support isn't good (no IE), but it's a beautifully clean way to achieve what you need.

Edit: A good post by John Resig discusses this problem and the difficulty in making it perfect, although it doesn't offer any additional guidance.

这篇关于HTML / CSS：可以百分比宽度divs总是完全填充他们的父容器（就像表格单元格一样）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！