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/