Question

我有一个固定大小的布局，使用margin: 0 auto居中。我想知道是否可以用CSS做这样的事情：我需要我的布局比右边距离少两倍。类似的东西：

<-- (2*n px margin) [fixed width div] (n px margin) -->

如何？（仅使用css）

Answer 1

可能你可以这样写：

<div class="warpper">
 <div class="container"></div>
</div>

CSS：

.warpper{
  margin:0 auto;
  width:500px;
}
.container{
  width:450px;
  margin-left:50px;
}

http://jsfiddle.net/EVBc3/

Answer 2

我知道你只说CSS，但我建议用以下方式使用javascript：

function repad()
        {
            if (navigator.appName=="Microsoft Internet Explorer")
            {
                var pad = ((document.documentElement.clientWidth-*FIXEDDIVWIDTH*)/3);
            }
            else
            {
                var pad = ((window.innerWidth-*FIXEDDIVWIDTH*)/3);
            }

            document.getElementById("*FIXEDDIV*").style.marginLeft = ((pad*2)+"px");
        }

显然用正确的价值取代*中的东西。

这样它可以扩展到浏览器大小

根据规则将中心站点布局转移到一侧（使用css）

2 个答案:

http://jsfiddle.net/EVBc3/