- 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。
- 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用,也可以结合在一起,相辅相成。
- 绝对定位布局
http://jsbin.com/zuvugedivi/1/edit?html,css,output
三列布局
- 浮动布局
- 为什么要使用浮动布局?
- 绝对定位布局中绝对定位元素会脱离文档流,如果要在布局中添加footer的时候,就需要使用浮动定位布局了。
-
http://jsbin.com/zepofuxohi/1/edit?html,css,output
浮动布局
网友评论