右边自适应+左边固定

<body>
     <div class="layout">
        <div class="header">蜘蛛侠</div>
        <div class="main">
            <div class="main_left">钢铁侠</div>
            <div class="main_right">黑猫警长</div>

        </div>

    </div>

//css样式

*{
    padding: 0;
    margin: 0;
    
}
.layout{
    width: 100%;
    height: 100%;
    >.header{
        width: 100%;
        height: 50px;
        background-color: pink;
    }
    .main{
        width: 100%;
        height: 500px;
        
       
        background-color: firebrick;
        >.main_left{
            width: 100px;
            height: 100%;
            float: left;
            background-color:purple;
          >.main_right{
            
             margin-left: 100px;  
             height: 100%;        
             background-color: green;
        }
    }
  }

}

       

猜你喜欢

转载自www.cnblogs.com/kangkang-saonian/p/10189618.html