具有3列的CSS Fluid Layout

Question

Column B in the layout below appears wrong. 下面布局中的B列显示错误。 I managed to make a 3 columns layout using http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/ . 我设法使用http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/进行了3列布局。 However, this assumes that the fixed columns A and B have the same height/have the same vertical starting point. 但是，这假定固定列A和B具有相同的高度/具有相同的垂直起点。 In my case B has another fluid div above. 在我的情况下，B在上方还有另一个流体div。

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

I don't know how to make column B. Can anyone help? 我不知道如何制作B栏。有人可以帮忙吗？

Thank you! 谢谢！

Update: 更新：

I am trying to use display: table and display: table-cell but is not working on IE8. 我正在尝试使用display：table和display：table-cell但在IE8上不起作用。 It works on Firefox. 它适用于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>

Even later edit: 甚至以后编辑：

In order to make the code above work on IE8 you need to add: 为了使上面的代码在IE8上有效，您需要添加：

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

Answer 1

There are 4 ways to do it: 有四种方法可以做到这一点：

Faux columns . 人造柱。 Basically trick the user into thinking the columns go down to the bottom of the page by creating a wrapper and giving it a background image with a divider. 基本上，通过创建包装器并为它提供带分隔线的背景图像，诱使用户认为列向下到页面底部。 In your case, for a fluid layout, you'd have to do it twice and use a left-aligned bg image once, and a right-aligned one the other time. 对于您的情况，要进行流畅的布局，您必须进行两次，并使用一次左对齐的bg图像，然后使用一次右对齐的bg图像。
The "One True Layout" . “一种真实布局” 。 This is a rather ugly hack that works by specifying a huge bottom padding as well as a negative bottom margin, then hiding the overflow. 这是一个非常丑陋的hack，它通过指定一个巨大的底部填充以及一个负的底部边距，然后隐藏溢出来工作。 It works fairly well in practice, but has a lot of small problems, such as no way of applying bottom borders (see the link for a full list). 它在实践中效果很好，但是存在许多小问题，例如无法应用底部边框（请参阅链接以获取完整列表）。
Use a wrapper with display: table and give the columns a display: table-cell . 使用带有display: table的包装器，并为各列提供display: table-cell 。 I have read that this works in most browsers, but haven't tried this myself, so no guarantees. 我读过，这适用于大多数浏览器，但我自己没有尝试过，因此无法保证。
Go back to tables. 回到表。 CSS is semantically great and all, but sometimes you have no choice but to sacrifice machine semantics for a decent user experience. CSS在语义上是很棒的，并且是全部，但是有时候您别无选择，只能牺牲机器语义来获得良好的用户体验。

Answer 2

The logical process for doing this would be to remove B from its current position on the DD Template. 这样做的逻辑过程是将B从DD模板上的当前位置删除。

Have the central div stretch to take up the additional space created. 让中央div拉伸以占用创建的额外空间。

Within that have your extra fluid div that you desire. 在其中有您想要的额外的div。

Then beneath that have another div and within that your fluid div and B. 然后在那个下面有另一个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