1、多列布局
1、定宽和自适应情况下
html文档:
<div class="parent">
<div class="left">
<div class="left_content">不定宽</div>
</div>
<div class="right">
<div class="right_content">自适应</div>
<div class="right_content">自适应</div>
</div>
</div>
float + margin 解决方案 :
.left{float:left;width:100px;}
.right{margin-left:110px;}
特点:因为.right不浮动,IE6下会出现问题:.right的元素文字缩进3像素(解决方案:在.left元素设置margin-left,属性值为负的.left的矿都),高版本浏览器下没问题。另外,因为.right不浮动,在.right的子元素中设置clear清除浮动属性也会出现问题。
解决该方案出现的问题:float + margin + (fix)
<div class="parent">
<div class="left">
<div class="left_content">不定宽</div>
</div>
<div class="right_flex">
<div class="right">
<div class="right_content">自适应</div>
<div class="right_content">自适应</div>
</div>
</div>
</div>
在HTML文件中.right元素添加一个父元素。为父元素.right_flex添加float属性
.left{float: left;width: 100px;}
.right_flex{float: right;width: 100%;margin-left:-100px;}
.right{margin-left:120px;}
float + overflow 解决方案:
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}
特点:.right元素添加overflow属性,出发BFC模式,.right容器内的元素不会被外面的元素隔离,.right的子元素就不会环绕.left元素,缺点:IE6不支持该方案。
table 解决方案:
.parent{display:table;width:100%;table-layout:fixed;}
.parent>div{display:table-cell;}
.left{width:100px;padding-right:10px;background-clip:content-box;}
特点:display:table;是根据内容定义宽度的,而在本案例中,宽度与内容无关,所以添加table-layout:fixed;另外在设置了display:table-cell;的元素内没法使用margin,所以使用padding定义边距。
flex 解决方案:
.parent{display:flex;}
.left{width:100px;margin-right:20px;}
.right{flex:1;}
特点:不支持低版本浏览器。另外:flex是根据内容做自适应的,性能可能是个问题,所以一般做简单布局,即flex属性的元素内的元素不是太多(结构上)。
2、不定宽和自适应情况下
在上面的五种解决方案,后三种方案可以使用。
table方案:
.parent{display:table;width:100%;}
.parent>div{display:table-cell;}
.left{width:0.1%;padding-right:10px;background-clip: content-box;}
.left>.left_content{width:200px;}
把table-layout:fixed;去掉,.left设置width:0.1%兼容操作。
3、等分布局
float解决方案:
<div class="parent">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div class="column">column4</div>
</div>
.parent{width: 100%;margin-left:-20px;}
.parent>.column{float: left;width:25%;padding-left:20px;box-sizing: border-box;}
table解决方案:
<div class="parent_flex">
<div class="parent">
<div class="column">column1</div>
<div class="column">column2</div>
<div class="column">column3</div>
<div class="column">column4</div>
</div>
</div>
.parent_flex{margin-left: -20px;}
.parent{width: 100%;display: table;table-layout: fixed;}
.column{display: table-cell;padding-left: 20px;}
特点:display:table;没法设置margin,并且table元素宽度跟随父元素的宽度变化而变化。所以添加一个父元素.parent_flex并设置margin。
flex结局方案:
.parent{display:flex;}
.column{flex:1}
.column+.column{margin-left:20px;}
4、等高布局
table方案与flex方案很容解决就不介绍了
float解决方案:(伪等高)
<div class="parent">
<div class="left">
<div class="left_content">left</div>
</div>
<div class="right">
<div class="right_content">right</div>
<div class="right_content">right</div>
</div>
</div>
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}