css - 中心对齐的3列布局,具有固定宽度的l& r列,流体中心

时间:2013-12-05 15:44:19

标签: html css css3

我在包装器中有一个3列布局。左列和右列具有固定宽度:180px。中心柱在640px和960px之间是流体。我正在使用计算方法计算其宽度:

width: calc(100% - 360px);
max-width: 960px;
min-width: 640px;

但我无法弄清楚包装器的CSS。如何让整个3列布局在浏览器的中心对齐?

1 个答案:

答案 0 :(得分:1)

你可以这样做:

#wrapper {
  margin:auto;
  max-width:1320px; /*960 + 360*/;
  min-width:1000px; /*640 + 360*/;
}

查看此演示 http://jsfiddle.net/VTX4q/10/

我更改尺寸以获得更好的可视化效果,但这是您可以使用自己的值进行的基础