使用css实现三栏自适应布局

来源:互联网 发布:iphone蓝牙连接mac 编辑:程序博客网 时间:2024/05/17 22:41

现象:

两边两栏固定宽度,中间为自适应。


思路:

1.绝对定位法:

父元素相对定位,左右两栏使用绝对定位,中间用margin相对父元素的边距撑开。

缺点: 

子元素使用绝对定位,父元素无法被撑开。会出现如下情况:

2.浮动法:

 HTML文件中写两个侧边div,写中间div。两侧边栏div分别设置左右浮动,中间栏用margin撑开,父元素overflow:auto!


3.margin负值法:(最常使用)

三栏均为左浮动,左栏

margin-left:-100%
右栏
margin-left:-自身宽度

附录:

        margin负值与relative的区别:

相对位置relative原有位置保留,而margin不保留。margin后的文档流会跟随margin流动。


0 0
原创粉丝点击