美文网首页
html+css布局之--左边固定宽,右侧自适应(4种方法)

html+css布局之--左边固定宽,右侧自适应(4种方法)

作者: 殖民_FE | 来源:发表于2017-06-16 14:07 被阅读0次

    今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种方法,码一下。
    有好的方法,可以告诉我!
    html:

      <h3>第一种:定位+margin-left</h3>
        <div class="cont">
            <div class="one">左侧定宽200px</div>
            <div class="two">右侧自适应</div>
        </div>
        <h3>第二种:flex</h3>
        <div class="cont1">
            <div class="a">左侧定宽200px</div>
            <div class="b">右侧自适应</div>
        </div>
        <h3>第三种:定位+浮动+padding-left+ box-sizing</h3>
        <div class="cont2">
            <div class="a1">左侧定宽200px</div>
            <div class="b1">右侧自适应</div>
        </div>
        <h3>第四种:浮动</h3>
        <div class="cont3">
            <div class="a2">左侧定宽200px</div>
            <div class="b2">右侧自适应</div>
        </div>
    

    css:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*****第一种******/
        
        .cont {
            height: 200px;
            overflow: hidden;
            border: 1px solid #000;
        }
        
        .one {
            width: 200px;
            height: 200px;
            background: #ccc;
            position: absolute;
        }
        
        .two {
            height: 200px;
            background: #f60;
            margin-left: 200px;
        }
        /*****第二种******/
        
        .cont1 {
            height: 200px;
            overflow: hidden;
            border: 1px solid #000;
            display: flex;
        }
        
        .a {
            width: 200px;
            height: 200px;
            background: #ccc;
        }
        
        .b {
            height: 200px;
            background: #f60;
            flex: 1;
        }
        /****第三种*******/
        
        .cont2 {
            height: 200px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        
        .a1 {
            width: 200px;
            height: 200px;
            background: #ccc;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .b1 {
            width: 100%;
            height: 200px;
            background: #f60;
            position: absolute;
            left: 200px;
            top: 0;
            padding-right: 200px;
            box-sizing: border-box;
        }
        /*****第四种******/
        
        .cont3 {
            height: 200px;
            border: 1px solid #000;
        }
        
        .a2 {
            width: 200px;
            height: 200px;
            background: #ccc;
            float: left;
        }
        
        .b2 {
            width: 100%;
            height: 200px;
            background: #f60;
        }
    </style>
    
    

    自己码一下,效果更好!

    相关文章

      网友评论

          本文标题: html+css布局之--左边固定宽,右侧自适应(4种方法)

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