位置：首页>> 网络编程>> 网页设计>> [翻译]寻找圣杯 In Search of the Holy Grail（3）

[翻译]寻找圣杯 In Search of the Holy Grail（3）

作者：abdvl　来源：Alipay UED　发布时间：2008-11-12 13:10:00　

标签：三栏,圣杯,负边距,css

第三步：把左边栏放在左边

现在我们要干的是怎么样让这三栏在一行，中间的容器已经完全符合我们的要求了，我们只需要关注剩下的两个，先从左边的开始。

需要两步让左边栏在左边.第一步:让他以100％的负margin(margin-left: -100％;)穿过中间的层，记住一定要用100％，因为中间的层的宽度是100％.

#left {
width: 200px; /* LC width */
margin-left: -100％;
}

现在左边栏和中间栏重合，左边重合，右边栏浮动过来（虽然还是掉下去了），现在的结果变成了下面的样子：

第二步:现在要把左边栏拉到正确的位置，我们使用相对定位来抵消左边栏的宽度

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100％;
  right: 200px;        /* LC width */
}

因为设置了right: 200px;所以左边栏被中心层的右边推远了200px，刚好到了左边。（The right property pushes it 200px away from the right edge; that is, to the left.）现在左边栏刚好完美的到了他应该到的位置