超级实用的CSS布局方案之多列布局(三)

不定宽+自适应

1）使用float+overflow
（1）原理、用法原理：这种情况与两列定宽查不多。用法：先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。
（2）代码实例<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
.left{        float: left;        margin-right: 20px;    }
.right{    overflow: hidden;}
.left p{    width: 200px;}
（3）优缺点优点:简单缺点:ie6下兼容性存在一定问题
2）使用table
（1）原理、用法原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。
（2）代码实例<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
.parent{    display: table; width: 100%;    }
.left,.right{    display: table-cell;}.left{    width: 0.1%;    padding-right: 20px;}
.left p{    width:200px;}
（3）优缺点缺点:ie6 ie7不支持
3）使用flex
（1）原理、用法原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。用法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。
（2）代码实例<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
.parent {    display:flex;}
.left {    margin-right:20px;}
.right {    flex:1;}
.left p{    width: 200px;}
（3）优缺点优点:flex很强大缺点:兼容性存在一定问题，性能存在一定问题
 欢迎各位想学习前端开发的小伙伴加入蓝轨迹WEB开发交流群 143046757 一同探讨~