我有 3 个 div: divLeft
,divCenter
并且divRight
我想divCenter
以 1200px 的宽度居中。左侧和右侧应具有流体宽度以填充到屏幕边缘。
我怎样才能做到这一点?
这是一个纯 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; }
如果这些边距必须包含内容,我建议使用 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");
祝你好运
我能想到的最简单的解决方案是使用calc()
函数:
.center,
.side {
float: left;
}
.center {
width: 1200px;
}
.side {
width: -webkit-calc((100% - 1200px) / 2));
width: calc((100% - 1200px) / 2));
}