三列布局的三种方法
来源:互联网 发布:双系统默认启动ubuntu 编辑:程序博客网 时间:2024/05/01 21:31
自身浮动法
此代码较简单,左栏左浮动,右栏右浮动,主栏内容放在最后,用
margin
值为左右的宽度来实现自适应
注意:不浮动的元素要放在浮动元素后面
绝对定位法
此方法与自身浮动法相似,但是使用的是绝对定位,左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主题栏采用左右的margin值来撑开距离
注意:采用浮动的方法时,浮动元素本身会占据其位置(对不浮动的元素来说,都浮动的元素不占据位置,),后面不浮动的元素跟随在后,但是绝对布局不会占据位置,后面的内容会被覆盖
margin负值法
中间的主体使用双层标签,外层内容div宽度100%显示,并且浮动,内层div为真正的主体内容,左栏与右栏采用margin负值定位,左栏左浮动,margin-left值为-100%,右栏也为左浮动,其margin-left值为本身宽度值
原理
主体内容浮动占据100%的位置,后面的元素依次浮动,然后使用margin相应的值来将其调整到本来的位置
转载: 我熟知的三种三栏网页宽度自适应布局方法
1 0
- 三列布局的三种方法
- 三列布局实现4种方法
- 三列布局的几种方式
- 三列布局的实现
- 门户网站三列布局(很有用的方法)
- 实现两(三)列等高布局的方法
- 【多列等高布局】三种方法,各取所需:
- 常见的两列布局和三列布局
- CSS2 三列布局
- 三列布局
- 三列布局设计
- css 三列布局
- 三列布局
- 实现三列布局
- 三列布局
- 实现三列布局
- CSS 三列布局
- 实现三列布局
- SpringSecurity学习笔记之三:配置用户存储
- 如何在visual studio下编译zxing cpp,以及zxing c++的使用
- 评日报文章:关于华为裁员
- stl函数之lower_bound 与 upper_bound
- String s=new String("abc")创建了几个对象?
- 三列布局的三种方法
- Android 快速退出应用程序
- 解决安装nginx的nginx: [emerg] mkdir() "/var/temp/nginx/client" failed (2: No such file or directory)问题
- Proguard使用最新,最全教程,亲自试验
- PCL_将点云数据写入PCD格式文件
- flume (日志收集系统) 基础概念
- git安装与初次使用
- mybatis框架(二)——核心组件及其作用
- jsp内置对象(隐含对象)