容器內兩部分,一部分固定寬度,一部分寬度自適應佔滿剩餘位置

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

上面是html代碼html

方法一:flexflex

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

方法二:c3計算屬性spa

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

   方法三:設置盒子間距值code

.container {
   .child1 {
       width: 100%;
       margin-right: 200px;
    }    
   .child2 {
       width: 200px;     
    }  
}
相關文章
相關標籤/搜索