左DIV +右DIV +中心的div = 100％的宽度。如何实现？

Question

我有三个div的，一个主要的div：

<div id="container" style="width:100%;"> 
    <div id="left" style="width:201px; float:left;"> 
    .... 
    </div> 
    <div id="centre" style="float:left;"> 
    .... 
    </div> 
    <div id="right" style="width:135px; float:right;"> 
    .... 
    </div> 
</div> 

它是如何能够使中心 DIV最大宽度，使 containerDivWidth = leftDivWidth + rightDivwidth + centreDivWidth;

Answer 1

我相信你AR是什么é努力实现的是“圣杯”布局。

有一个伟大的名单这个布局除了文章，你应该看看：

http://www.alistapart.com/articles/holygrail

Answer 2

不能混合相对固定和宽度在我看来是在CSS的一个缺点。

你能做的最好的是一样的东西：

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
    .... 
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
    ....  
    </div> 
    <div id="right" style="width:15%; float:right;"> 
    .... 
    </div> 
</div> 

，我会非常高兴，如果我错了。

Answer 3

我以前所做的，就是设置centre拥有的201px左边距，以及135px右边距。将它设置为相对定位（而不是漂浮它），那么它应该在左，右立柱之间填充整个剩余空间。

我似乎无法找到我的旧代码的例子之一，所以这是我此刻可以做到最好。希望能帮助到你！

Answer 4

一点点的JavaScript，其完美的/ 附加jQuery的第一选择器的&等

<script type="text/javascript" src="js/jquery.js"></script> 

和JavaScript部分/

$(document).ready(function(){ 
    $('#centre').css("width",$(window).width()-336) 

    $(window).resize(function() { 
     $('#centre').css("width",$(window).width()-336) 
    }); 
}); 

Answer 5

这可能帮助： http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm alt text http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels-dimensions.gif

Answer 6

这将使你有固定的左，右柱和灵活的中心部分：

CSS

<style type="text/css"> 
    #left { 
    float: left; 
    width: 201px; 
    border: 1px solid red; 
    } 

    #centre { 
    display: block; 
    overflow: auto; 
    border: 1px solid green; 
    } 

    #right { 
    float: right; 
    width: 135px; 
    border: 1px solid blue; 
    } 
</style> 

HTML

<div id="container" style="width:100%;"> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
    <div id="centre">Middle</div> 
</div>