html - 如何让 div 填充固定宽度 div 左右的水平空间

Question

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

我怎样才能做到这一点？

Answer 1

这是一个纯 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; }

Answer 2

如果这些边距必须包含内容，我建议使用 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");

祝你好运

Answer 3

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

.center,
.side {
  float: left;
}

.center {
  width: 1200px;
}

.side {
  width: -webkit-calc((100% - 1200px) / 2));
  width: calc((100% - 1200px) / 2));
}​