带3列的CSS流体布局

下列布局中的B列出现错误。我设法使用http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/来制作3列布局。但是，这假设固定的列A和B具有相同的高度/具有相同的垂直起点。在我的情况B上面有另一个流体股利。带3列的CSS流体布局

alt text http://img191.imageshack.us/img191/1520/fluidlayout.png

我不知道如何使列B.谁能帮助？

谢谢！

更新：

我试图使用显示：表并显示：表单元格，但不工作的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">

来源

2010-02-20 Victor Hurdugaci

有4种方式来做到这一点：

Faux columns。基本上欺骗用户，通过创建一个包装器并用分隔符给它一个背景图像，让这些列进入到页面底部。在你的情况下，对于流体布局，你必须做两次，一次使用左对齐的bg图像，另一次使用右对齐的图像。
"One True Layout"。这是一个相当丑陋的黑客行为，通过指定一个巨大的底部填充以及负底部边距，然后隐藏溢出。它在实践中运行良好，但存在许多小问题，例如无法应用底部边界（请参阅链接以获取完整列表）。
使用display: table的包装并给列display: table-cell。我已经读过，这在大多数浏览器中都可以使用，但还没有尝试过，所以没有保证。
回到表格。 CSS在语义上是伟大的，但是有时候你别无选择，只能牺牲机器语义来获得体面的用户体验。

来源

2010-02-20 20:31:41

除非我误解的问题，我不认为等同于平等的矩形中的所有列的高度是他想要的东西，意义这可以在不使用上述情况下实现？ – Steve 2010-02-20 20:37:10

我可能误解了意图（目前尚不清楚），但从问题和图像上来看，上述4个建议中的任何一个都可以工作，因为两列（在本例中为中心和右边）通常都是封装，可以在不破坏布局的其余部分的情况下应用标题。 – 2010-02-20 20:55:20

我正在使用解决方案2，最后，我做了布局，但它在IE上看起来不好。 :(现在就试试3，如果不工作，我会回到表格 – 2010-02-20 21:12:56

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

有中央div伸展占用创造的额外空间。

其中有你想要的额外流体股利。

然后在其下方还有一个DIV并在您的流体股利和B.

来源

2010-02-20 20:34:17 Steve

这就是我'但是结果并不好，现在我管理一些东西，但在IE上看起来很糟糕。 – 2010-02-20 21:11:08

带3列的CSS流体布局

回答

相关问题