Question

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

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

有4种方法可以做到：

Faux columns。基本上欺骗用户通过创建包装器并使用分隔符为其提供背景图像来将列放到页面底部。在您的情况下，对于流畅的布局，您必须执行两次并使用左对齐的bg图像一次，并且在另一次使用右对齐的图像。
"One True Layout"。这是一个相当丑陋的黑客攻击，通过指定一个巨大的底部填充以及一个负底部边距，然后隐藏溢出。它在实践中运作得相当好，但是有很多小问题，例如无法应用底部边框（请参阅完整列表的链接）。
使用包含display: table的包装，并为列display: table-cell。我已经知道这适用于大多数浏览器，但我自己没有尝试过，所以没有保证。
回到表格。 CSS在语义上很棒，但有时候你别无选择，只能为了体面的用户体验而牺牲机器语义。

Answer 2

执行此操作的逻辑过程是从DD模板上的当前位置删除B.

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

在其中有你想要的额外流体div。

然后在那下面有另一个div，在你的流体div和B之内。

具有3列的CSS流体布局

2 个答案: