您现在的位置:首页 >> 前端 >> 内容

CSS常见布局之->多列布局(定宽+自适应)代码实现

时间:2018/5/14 15:47:05 点击:

  核心提示:使用flex (1)原理、用法原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、mar...

使用flex (1)原理、用法

原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。

用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。

<style type="text/css">  
       .parent{display:flex;border: 1px solid green;}  
       .left{width: 100px;margin-right: 20px;border: 1px solid blue;}  
       .right{border: 1px solid red;flex: 1;border: 1px solid yellow;}  
   </style>  
<p class="parent">  
    <p class="left">left</p>  
    <p class="right">  
        <p>rightrightrightrightrightrightright</p>  
        <p>right</p>  
    </p>  
</p>  

Tags:CS SS S常 常见 
作者:网络 来源:匆匆过客