其他分享
首页 > 其他分享> > 容器内两部分,一部分固定宽度,一部分宽度自适应占满剩余位置

容器内两部分,一部分固定宽度,一部分宽度自适应占满剩余位置

作者:互联网

<div class='container'}>
    <div class='child1'/>
    <div class='child2'/>
</div>

上面是html代码

方法一:flex

.container {
   display:flex;
   .child1 {
        flex;1;
    }    
   .child2 {
       width: 200px;     
    }  
}

方法二:c3计算属性

.container {
   .child1 {
        width: clac(100% - 200px);
    }    
   .child2 {
       width: 200px;     
    }  
}

   方法三:设置盒子间距值

.container {
   .child1 {
       width: 100%;
       margin-right: 200px;
    }    
   .child2 {
       width: 200px;     
    }  
}

 

标签:flex,child2,container,child1,容器,width,宽度,一部分,200px
来源: https://www.cnblogs.com/w-819/p/10713880.html