不可能的html布局？
不可能的html布局？
提问于 2014-04-17 11:00:07
我试图创建一个类似于下面所示的页面布局(CSS只支持Chrome，Firefox，IE8+)
注意:列1,2,3都可以动态增长(例如，从xhr附加标记等)，它们都应该是相同的高度(最大列的高度)。此外，细胞4也可以生长，虽然应该只是其内部内容的高度。
_______________
| |_____4_____|
| | | |
| 1 | 2 | 3 |
| | | |
|___|_______|___|我在实现这个跨浏览器时遇到了麻烦。
我的尝试：我创建了一个简化的小提琴示例来展示我使用表(使用行跨度/ colspan)来获得所需布局的尝试。我想这本质上是一个多列css布局与一个扭曲..。
虽然表一般不应该用于布局。这似乎是跨浏览器实现预期结果的最不麻烦的方式。
我使用了js超时来调整其中一个列的高度(以模拟内容的动态附加)。
问题与我的尝试：
在Firefox (和IE9/ IE8)中，当第1列(红细胞)动态增长时，单元格'4‘(jsfiddle中的绿色单元格)将不尊重其设定的像素高度(高度变得更大)。查看Firefox中的小提琴以查看问题。为什么当细胞1的高度更新时，细胞4会增长？
这在Chrome中不是问题。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-22 08:27:45
Stack Overflow用户
发布于 2014-04-17 11:37:03
这样的事有帮助吗？
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="violet"></div>
</div>(查看jsfiddle css)它当然可以改进，但它是一个不使用表的开始。
Stack Overflow用户
发布于 2014-04-17 12:18:10
我很确定你能这样做。
设置一个双容器，您不需要任何固定的值。
<div class="container">
<div class="wrapper">
<div class="column1">
<p>Column 1</p>
</div>
<div class="wrap-right-side">
<div class="column4">
<p>Column 4</p>
</div>
<div class="right-side">
<div class="column2">
<p>Column 2</p>
</div>
<div class="column3">
<p>Column 4</p>
</div>
</div>
<!-- end right side -->
</div>
<!-- end wrap right side -->
</div>
<!-- end wrapper -->
</div>
<!-- end container -->唯一的问题是浮动阻止了红色列的全部高度。所以你得想办法清除浮子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23131348
复制相关文章
相似问题
腾讯云开发者
