0

我有 3 个 div: divLeftdivCenter并且divRight我想divCenter以 1200px 的宽度居中。左侧和右侧应具有流体宽度以填充到屏幕边缘。

我怎样才能做到这一点?

4

3 回答 3

4

这是一个纯 CSS 解决方案:http: //jsfiddle.net/Wexcode/BGU7V/

您可能希望将其与Faux Columns结合使用。

.divCenter { 
    width: 1200px;
    margin: 0 auto; }
.divCenter p { 
    position: absolute;
    top: 0;
    width: 1200px; }​

.divLeft { float: left; width: 50%; }
.divLeft p { margin: 0 600px 0 0; }

.divRight { float: right; width: 50%; }
.divRight p { margin: 0 0 0 600px; }
于 2012-12-26T21:28:54.510 回答
3

如果这些边距必须包含内容,我建议使用 javascript,如果它们是空格,则使用 margin-left: auto; 右边距:自动。

对于 jQuery,这样的事情可能适用于页面加载/调整大小:

<div class="marginClass" id="divLeft"></div>
<div id="divCenter"></div>
<div class="marginClass" id="divRight"></div>
$(".marginClass").css("width", ( $(window).width() - $("#divCenter").width() / 2 ) + "px");

祝你好运

于 2012-12-26T21:03:04.353 回答
3

我能想到的最简单的解决方案是使用calc()函数:

.center,
.side {
  float: left;
}

.center {
  width: 1200px;
}

.side {
  width: -webkit-calc((100% - 1200px) / 2));
  width: calc((100% - 1200px) / 2));
}​
于 2012-12-26T21:08:57.317 回答