3列布局，100％寬度和可變中心div

Question

我想創建一個居中div，一個左邊和一個右邊div的3列布局。左側和右側的div應該從居中div擴展到頁面的左側和右側。居中的div包含具有透明區域的元素，因此居中div不應與左右div相重疊。如果居中的div具有固定的寬度，我設法創建了一個解決方案。問題是，是否有可能創建一個類似的佈局，但具有動態寬度的分區格？

jsFiddle Link

這裏是固定寬度的代碼。

CSS：

#divCenter{ 
    position:absolute; 
    top:0%; 
    left:0; 
    right:0; 
    height:50px; 
    width:500px; 
    margin:0 auto; 
    border: 1px solid #aaaaff; 
    background:#aaaaff; 
    z-index:2; 
} 
#divLeft{ 
    position:absolute; 
    top:0; 
    left:0%; 
    width:50%; 
    border: 1px solid #aaffaa; 
    z-index:1; 
} 
#divLeftInner{ 
    height:60px; 
    margin-right:250px; 
    background:#aaffaa; 
} 
#divRight{ 
    position:absolute; 
    top:0; 
    right:0%; 
    width:50%; 
    border: 1px solid #ffaaaa; 
    z-index:1; 
} 
#divRightInner{ 
    height:60px; 
    margin-left:250px; 
    background:#ffaaaa; 
} 

HTML：

<div id="divCenter"> 
</div> 
<div id="divLeft"> 
    <div id="divLeftInner"> 
    </div> 
</div> 
<div id="divRight"> 
    <div id="divRightInner"> 
    </div> 
</div> 

Answer 1

浮動所有列左，設置左，右列具有相同的寬度 - 使用JavaScript。

HTML

<div id="wrapper"> 
    <div id="left" class="col"></div> 
    <div id="mid" class="col"></div> 
    <div id="right" class="col"></div> 
</div>​ 

CSS

.col {float:left;height:200px;} 
#left, #right {width:30%;background:red;} 
#mid {width:40%;background:blue;} 

jQuery的

//extra verbose for clarity's sake 
var setWidths = function() { 
    var wrapWidth = $("#wrapper").width(); 
    var midWidth = $("#mid").width(); 
    var leftOverWidth = wrapWidth - midWidth; 
    var sideColWidth = leftOverWidth/2; 
    $(".sidecol").width(sideColWidth); 
} 

//set new sizes whenever the window is resized 
$(window).on("resize", setWidths); 

$(function() { 
    setWidths(); //set correct sizes when the DOM has loaded 
});​ 

http://jsfiddle.net/GYGL3/37/