具有3列的CSS Fluid Layout

Question

下面布局中的B列显示错误。 我设法使用http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/进行了3列布局。 但是，这假定固定列A和B具有相同的高度/具有相同的垂直起点。 在我的情况下，B在上方还有另一个流体div。

替代文字http://img191.imageshack.us/img191/1520/fluidlayout.png

我不知道如何制作B栏。有人可以帮忙吗？

谢谢！

更新：

我正在尝试使用display：table和display：table-cell但在IE8上不起作用。 它适用于Firefox。

<html>
    <head>
    </head>
    <body>
        <div style="display: table">
            <div style="display: table-cell">
                Column 1
            </div>
            <div style="display: table-cell">
                Column 2
            </div>
        </div>
    </body>
</html>

甚至以后编辑：

为了使上面的代码在IE8上有效，您需要添加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 1

有四种方法可以做到这一点：

人造柱。 基本上，通过创建包装器并为它提供带分隔线的背景图像，诱使用户认为列向下到页面底部。 对于您的情况，要进行流畅的布局，您必须进行两次，并使用一次左对齐的bg图像，然后使用一次右对齐的bg图像。
“一种真实布局” 。 这是一个非常丑陋的hack，它通过指定一个巨大的底部填充以及一个负的底部边距，然后隐藏溢出来工作。 它在实践中效果很好，但是存在许多小问题，例如无法应用底部边框（请参阅链接以获取完整列表）。
使用带有display: table的包装器，并为各列提供display: table-cell 。 我读过，这适用于大多数浏览器，但我自己没有尝试过，因此无法保证。
回到表。 CSS在语义上是很棒的，并且是全部，但是有时候您别无选择，只能牺牲机器语义来获得良好的用户体验。

Answer 2

这样做的逻辑过程是将B从DD模板上的当前位置删除。

让中央div拉伸以占用创建的额外空间。

在其中有您想要的额外的div。

然后在那个下面有另一个div，在那个下面是您的流体div和B。

具有3列的CSS Fluid Layout

问题描述

2 个解决方案

解决方案1
2 2010-02-20 20:31:41

解决方案2
1 2010-02-20 20:34:17

具有3列的CSS Fluid Layout

问题描述

2 个解决方案

解决方案1 2 2010-02-20 20:31:41

解决方案2 1 2010-02-20 20:34:17

解决方案1
2 2010-02-20 20:31:41

解决方案2
1 2010-02-20 20:34:17