最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。

1. 固定宽度,中部DIV内容优先显示布局

说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

提示:你可以先修改部分代码再运行。

2. 高度自适应的三列布局

说明:之前很多人都在问的一个布局方法,在表格布局时代80%的网站都使用这样的布局,不过现在很少见了,刚刚由表格时代过渡到div时代的时候很多人都在纠结这个问题,当然实现的方法也很多,下面我这里的方法是总结过最好的了。
实现方法:主要用到了margin-bottom:-2000px和padding-bottom:2000px这2个样式,话说maring的负值还是很有意思的,值得深入了解一下。
下面是demo:

提示:你可以先修改部分代码再运行。

3. 中间宽度自适应3列布局

说明:典型的亚马逊网站的布局,中间内容是自适应的,左右为固定宽度。
实现方法:分2步,先固定左列,然后在右列里面在做文章,有浮动的div放在前面,左浮动的div不加浮动会自动上去,然后在设置右边距,此方法还可以延伸2列左栏自适应布局。
下面是demo:

提示:你可以先修改部分代码再运行。

转载请注明来自:爱前端

One thought on “3列、2列自适应布局,中部内容优先显示3列布局等方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注