Question

我尝试创建类似于下图所示的页面布局（CSS仅支持Chrome，Firefox，IE8 +）

注意：列1,2,3都可以动态增长（例如，从xhr等附加标记），它们应该都是相同的高度（最大列的高度）。此外，细胞4也可以生长，尽管它应该只是其内部含量的高度。

 _______________
|   |_____4_____|
|   |       |   |
| 1 |   2   | 3 |
|   |       |   |
|___|_______|___|

我在实现这种跨浏览器时遇到了问题。

我的尝试： 我已经创建了一个简化的 jsfiddle 示例，以显示我尝试使用表格（使用rowspan / colspan）来获得所需的布局。我想这实际上是一个带有扭曲的多列css布局......

虽然通常不应将表格用于布局。它似乎是通过浏览器实现预期结果的最不实用的方式。

我使用了js超时来调整其中一列的高度（以模拟内容的动态附加）。

我的尝试出现问题：

在Firefox（和IE9 / IE8）中，单元格＆＃39; 4＆＃39;当第1列（红色单元格）动态增长时，（jsfiddle中的绿色单元格）将不会尊重其设置像素高度（高度变大）。查看Firefox中的小提琴以查看问题。当细胞1的高度更新时，为什么细胞4会生长？

这不是Chrome中的问题。

Answer 1

这样的事情会有什么帮助吗？

http://jsfiddle.net/cku7y/5/

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="violet"></div>    
</div>

（查看jsfiddle css）它当然可以改进，但它不是使用表格就是一个开始。

Answer 2

我很确定你可以这样做。

http://jsfiddle.net/V3ta3/2/

设置一个双容器，您不需要任何固定值。

<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 -->

这个唯一的问题是浮子阻止了红柱的整个高度。所以你需要找到一种方法来清除浮动。

Answer 3

使用上面评论中添加的article安德鲁所描述的技术，我能够创建一个可行的跨浏览器（IE8 +）解决方案 - here

标记非常简单，不需要表格

<div class="container">
    <div class="leftCol">left col
        <div class="leftColContent"></div>
    </div>
    <div class="header">header</div>
    <div class="centerCol">center col</div>
    <div class="rightCol">right col</div>
</div>

不可能的HTML布局？

3 个答案: