左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>