三栏布局(左右宽度固定 中间自适应)

要求:高度已知,左右两栏宽度固定为300px,中间自适应

方案一    float 浮动布局


复制代码

"wrap">
"left">左边
"right">右边
"middle">中间
复制代码

方案二    absolute绝对定位


复制代码

"wrap">
"left">左边
"middle">中间
"right">右边
复制代码

注:这里三个div顺序可以任意调整


方案三     margin负值


复制代码

"wrap">
"middle">
"midIn">中间
"left">左边
"right">右边
复制代码


方案四  table表格布局


复制代码

"wrap">
"left">左边
"middle">中间
"right">右边
复制代码

注:三栏中一栏的高度变动,其他两栏也会随之变化


方案五   flex 弹性布局


复制代码

"wrap">
"left">左边
"middle">中间
"right">右边
复制代码

注:写flex布局时要加浏览器内核前缀,并且只支持IE10及以上。

方案六   grid网格布局


复制代码

"wrap">
"left">左边
"middle">中间
"right">右边
复制代码

注:支持IE11及以上,Opera Mini等不兼容。网格布局入门参考文章:http://www.css88.com/archives/8661


方案七     父元素生成BFC


复制代码

"middle"> 中间
"left">左边
"right">右边
复制代码

依据BFC布局原理:BFC的区域不会与float box重叠



转载于:https://juejin.im/post/5b08102751882538aa1edf88

你可能感兴趣的:(三栏布局(左右宽度固定 中间自适应))