html - CSS Floated Div 高度问题,没有简单的解决办法?

标签 html css overflow css-float

我有一个我无法解决的 CSS 问题。

我做了 a little diagram .

假设粉色和绿色框的高度由那里的内容决定。粉红色的盒子有时可能是较小的盒子。

我想做的是让较小的盒子将其高度固定到外部包含的 div,以便它与粉红色盒子具有相同的高度(反之亦然)。

谁有解决办法?

粉色和绿色框上的最小高度不起作用,因为它们可能会超过该高度(也不支持 IE6)。

粉色和绿色框上的 100% 高度将不起作用,因为外部 div 没有固定高度。

一张 table 就可以了,但是拜托,一张 table ?

我可以通过将粉红色和绿色框放在外部 div 的背景中来伪造背景和左右边框。但这看起来很乱。

目前我有一个js解决方案,但必须有一个更简单的。

干杯。

最佳答案

除了 Javascript/Jquery 或表,我唯一能想到的是基于 display: table-cell 的解决方案(解释 here)——但是也不会在 IE 中工作,并且与直接使用表格没有太大区别,是吗?

我想说这是极少数情况之一,由于糟糕的 CSS 规范和/或实现,无法绕过表格。

编辑:正如其他回答者所指出的,在大多数情况下都可以使用 CSS 变通方法(“人造列”)。使用“CSS 表格”(使用 display: table 属性)我认为还不是有效的解决方案,因为它们不受 IE6 的支持,IE6 是一种仍然占有相当大市场份额的浏览器。

关于html - CSS Floated Div 高度问题,没有简单的解决办法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2237133/

相关文章:

css - 脱离父 div

php - 如何在 foreach 循环中创建 HTML 表格

jquery - 完全删除水平滚动条

css溢出滚动表格单元格宽度为:auto or width:100%

css - Div 中的表从 DIV 溢出,如何在不使用 CSS 编辑 HTML 的情况下在页面上启用滚动而不是 DIV?

javascript - 使用 jQuery 将无序列表所选项目传递到 ASP.NET Web 窗体

html - 在固定大小的 div 中心显示不同尺寸的图像

html - 字符集标记代码行如何使我的整个页面重新加载两次?

两个div的CSS Div静态和自动宽度

css - Bootstrap Text over Image 响应式