CSS三列布局

问题描述:

我正在寻找完成以下布局的最佳方法。我需要容纳不同大小的页眉和页脚,其中我无法控制。在这些元素之间,我需要设置一个固定的三列布局。总布局需要始终在横向模式下的一个标准页面上打印。如果我不必考虑页眉/页脚,我知道我可以使用固定的布局,但我不能。布局需要是:CSS三列布局

可变高度头
DIV与三个固定宽度的列
可变高度页脚

P.S.对不起,还不知道到这里图形显示:(这有道

+2

像他们在这里做的事情? http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/或http://matthewjamestaylor.com/blog/perfect-3-column.htm – 2011-04-28 18:37:44

+1

看看这2篇文章... - http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks The第一篇文章将介绍如何设置3列,第二篇介绍如何关注具有独特背景色的如何使它们高度相等。我希望这有帮助。斯托伊奇 – Hristo 2011-04-28 18:34:56

如果你正在寻找有文本分为三列,请客,你可以尝试CSS3的列:

然而,这是不是在旧的浏览器支持。

如果你想控制你如何[R页打印,使用@page规则,如:对@页

<html> 
    <head> 
     <style type="text/css"> 
      @page 
      { 
       size:portrait; 
       margin:1in; 
      } 
     </style> 
    </head> 
    <body>...</body> 
</html> 

更多信息可在W3C的CSS 2 spec被发现。