三萧十禾
新手
新手
  • 最后登录2020-10-30
  • 发帖数3
阅读:296回复:0

[css]双飞翼布局(三栏布局,左右固定布局,中间自适应)

楼主#
更多 发布于:2020-08-13 20:23
1、用浮动布局  :注意清除浮动  和div的顺序,第二个div是最右边栏
 第一个div  需要给宽度  再左浮动  
 第二个div   给宽度   再右浮动
 第三个就自动居中  


2、position    absolute绝对定位
 第一个div (左) 给宽度eg:200  固定定位  left为0
 第二个div(中)   固定定位  left right 为200  300px
 第三个div  (右) 给宽度eg:300  固定定位  right为0


3、flex 弹性布局    :不兼容ie8以下版本
给左中右div  一个大的div包裹   这个div设置 dispaly:flex;
然后给中间div设置    flex:1;


4、表格布局  table
包裹三个div的大盒子设置  dispaly:table  ; width: 100%;
给三个div都设置display:table-cell
给左右两个div分别设置宽度


5、grid布局  : CSS3属性,若不考虑IE8,可以使用
给包裹三个div的大盒子设置如下属性
            width: 100%;
            display: grid;
            grid-template-rows:200px;
            grid-template-columns: 200px auto 200px;
游客


返回顶部

公众号

公众号