css 布局之：左右及多列等高

最新推荐文章于 2023-10-10 14:36:28 发布

原创最新推荐文章于 2023-10-10 14:36:28 发布 · 714 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #float #测试 #ie

本文介绍了一种使用CSS实现左右及多列布局的方法，通过调整元素的margin和padding来达到视觉上统一的高度，适用于需要精确控制布局的情况。

用css布局时，我们经常会感觉css也有他的缺点，比如：两列、多列时，高度不能统一(尤其是有图片时，美观度会大打折扣)，做标题栏时，标题在左，more在右，这样用css实现比较有点困难，尤其是more为图片时，其不能垂居中，这样用css布局很烦恼。　　下面我来说一下，左右及多列等的实现方法。

left

center

……（20个或更多个）

center

right

　　CSS 代码： *{ margin:0; padding:0; } #wrap{ overflow:hidden; width:1000px; margin:0 auto; } #left,#center,#right{ margin-bottom:-10000px; padding-bottom:10000px; } #left{ float:left; width:250px; background:#00FFFF; } #center{ float:left; width:500px; background:#FF0000; } #right{ float:right; width:250px; background:#00FF00; } 　　以上代码是我从网上看到的，其思想是：把内容把box拉到一个足以高的长度，然后，隐藏多的部分，这是其外边的content的height overflow 就显示出了css的优越性。有人又要问了，margin-bottom:-1000px;这是什么意思，平时见到的都是正值，负值如何理解，告诉下面的元素往上推。　　但是我在ie5下测试，发现还是不够完美，于是我在content 的属性中加了zoom:1　问题圆满解决。拿出来分享一下，希望遇到此