建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 网页布局 >

完美三栏网页布局例子(4)

时间:2008-11-12 18:56来源:Adobe 作者:abdvl 点击:
第三步:把左边栏放在左边 现在我们要干的是怎么样让这三栏在一行,中间的容器已经完全符合我们的要求了,我们只需要关注剩下的两个,先从左边的开始。 需要两步让左边栏在左边.第一步:让他以100%的负margin(margin

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

现在我们要干的是怎么样让这三栏在一行,中间的容器已经完全符合我们的要求了,我们只需要关注剩下的两个,先从左边的开始。
需要两步让左边栏在左边.第一步:让他以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.)现在左边栏刚好完美的到了他应该到的位置

第四步:把右边栏放到右边

剩下的事就是把右边栏放在右边,需要把他拉出容器放在容器的padding上,我们依然利用负边距。

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

现在所有的东西都在他该在的位置上了,没有谁”掉队”,呵呵。

(责任编辑:admin)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容