美文网首页
2017-11-08【左中右三栏布局】

2017-11-08【左中右三栏布局】

作者: yztldxdzhu | 来源:发表于2017-11-08 16:15 被阅读215次

    关于CSS的三无原则:无浮动,无宽度,无图片。

    实现效果:左右两栏宽度固定或设置百分比,中间一栏宽度自适应。

    方法1:绝对定位法-----【将左右两栏绝对定位放两边,中间使用margin属性撑开】

    html,body{margin:0;height:100%;}
    #left,#right{position:absolute;top:0;width:20%;height:100%;}  
    #left{left:0;background-color:pink;}
    #right{right: 0;background-color: pink;}
    #main{margin: 0 22%;height: 100%;background-color: yellow;}
    
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
    
    //左中右三个div的顺序是可以任意调整的,其它方法则不能,对顺序有限制。
    
    1.png

    方法2:margin负值法-----【三部分主体都浮动,再采用margin-left确定左右栏的位置】

    html,body{margin:0;height:100%;}
    #main{float:left;width:100%;height:100%;}
    #main #body{margin:0 22%;height:100%;background-color: lightgreen;}
    #left,#right{float:left;width:20%;height:100%;background-color:pink;}
    #left{margin-left:-100%;}
    #right{margin-left:-20%;}
    
    <div id="main">
        <div id="body"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    
    //不能随意改变元素顺序,主体部分放在最开始。
    
    1.png

    方法3:左右浮动法

    html,body{margin:0;height:100%;}
    #main{height:100%;margin:0 22%;background-color:hotpink;}
    #left,#right{width:20%;height:100%;background-color:pink;}
    #left{float:left;}
    #right{float:right;}
    
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    
    //不能随意改变元素顺序,主体部分放在最后。
    //注意需要清除浮动
    
    1.png

    方法3:左右浮动法-----【方法3稍微改变一下】

    html,body{margin:0;height:100%;}
    #main{height:100%;overflow:hidden;background-color:hotpink;}
    #left,#right{width:20%;height:100%;background-color:pink;}
    #left{float:left;margin-right:2%}
    #right{float:right;margin-left:2%}
    
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    

    【将main设置overflow:hidden; 产生BFC,浮动对其不影响,宽度重新计算】

    1.png

    相关文章

      网友评论

          本文标题:2017-11-08【左中右三栏布局】

          本文链接:https://www.haomeiwen.com/subject/vsoemxtx.html