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/

3列布局，100％宽度和可变居中div

1 个答案: