使用流体中心实现3列布局的正确方法是什么 [英] What's the Proper way to achieve 3-Column layout with fluid center

问题描述

我正在使用一个3列布局，有两个固定宽度的侧边栏（左和右）和一个流体中心。我按照A List Apart的圣杯文章，虽然这在大多数浏览器中都可以正常工作，我在Internet Explorer 7 +中遇到一些问题。

IE 7+的问题实际上不是来自这种技术，而是来自页面是渲染在怪异模式。如果我在标准合规模式下渲染它，许多过时的元素会被移除，并且需要完全重写。

由于本文过去几年，这是关于这个问题的最新的参考？

HTML：

$ b $

 < div id =wrapper> 
< div id =left>< / div> 
< div id =center>中心内容< / div> 
< div id =right>< / div> 
< / div> 
  

CSS：

 code> #left {
 position：absolute; 
 left：0; 
 width：50px; 
 height：100％; 
 background-color：pink; 
} 
 
 #center {
 height：100％; 
 margin：0 50px; 
 background-color：green; 
} 
 
 #right {
 position：absolute; 
 right：0; 
 top：0; 
 width：50px; 
 height：100％; 
 background-color：red; 
} 
 
 body，html，#wrapper {
 width：100％; 
 height：100％; 
 padding：0; 
 margin：0; 
} 
  

演示：http://jsfiddle.net/AlienWebguy/ykAPM/

I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer 7+.

The problem with IE 7+ actually doesn't stem from this technique, but rather from the fact that the page is rendering in quirks mode. If I make it render in standards-compliance mode, however, many outdated elements become displaced and would require a complete re-writing.

Given that this article dates a few years, is this the most up-to-date reference on the subject? Or should I be applying a different technique?

Any insight on the best way to do this will be greatly appreciated.

解决方案

There's really no point in floating the columns.

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center"> Center content</div>
    <div id="right"></div>
</div>

CSS:

#left {
    position:absolute;
    left:0;
    width:50px;
    height:100%;
    background-color:pink;
}

#center {
    height:100%;
    margin: 0 50px;
    background-color:green;
}

#right {
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    background-color:red;
}

body, html, #wrapper {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

Demo: http://jsfiddle.net/AlienWebguy/ykAPM/

这篇关于使用流体中心实现3列布局的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！