html - 具有 100% 宽度和可变居中 div 的 3 列布局

Question

我想创建一个 3 列布局，其中一个 div 居中，一个左侧和一个右侧 div。左右 div 应该从居中的 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/