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; margin-right：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));
}

如何在固定宽度div的左侧和右侧使用div填充水平空间

3 个答案: