如何將餘下的寬度設置爲正確的float元素？

Question

我想要做的是將width: {the rest of width}設置爲具有float:right屬性的元素。這裏是我的代碼：

.wrapper{ 
 
    border: 1px solid; 
 
    padding-left: 10px; 
 
} 
 

 
.fix{ 
 
    border: 1px solid blue; 
 
    width: 80px; 
 
    display:inline-block; 
 
} 
 

 
.rest{ 
 
    float: right; 
 
    border: 1px solid red; 
 
}

<div class='wrapper'> 
 
    <div class='fix'> fix width </div> 
 
    <div class='rest'> it should has both right float and the rest of width</div> 
 
</div>

我怎麼能填補這一空白？這是預期輸出：

Answer 1

不知道你是在CSS如何靈活，但如果你在固定的div使用float:left您可以在正確的使用overflow:auto。

.wrapper{ 
 
    border: 1px solid; 
 
    padding-left: 10px; 
 
} 
 

 
.fix{ 
 
    border: 1px solid blue; 
 
    width: 80px; 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.rest{ 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
}

<div class='wrapper'> 
 
    <div class='fix'> fix width </div> 
 
    <div class='rest'> it should has both right float and the rest of width</div> 
 
</div>

如果需要浮動權div的實際內容則仍然是正確的，你可以添加一個內容容器右內浮動。

.wrapper{ 
 
    border: 1px solid; 
 
    padding-left: 10px; 
 
} 
 

 
.fix{ 
 
    border: 1px solid blue; 
 
    width: 80px; 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.rest{ 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
} 
 

 
.right-content{ 
 
    float:right; 
 
}

<div class='wrapper'> 
 
    <div class='fix'> fix width </div> 
 
    <div class='rest'><div class="right-content"> it should has both right float and the rest of width</div></div> 
 
</div>

Answer 2

使用calc減去值。

.rest{ 
    float: right; 
    border: 1px solid red; 
    width: calc(100% - 80px); 
} 

Answer 3

在申請％寬度

.fix{ 
     border: 1px solid blue;  
     width: 20%;  
     display:inline-block;  
     float:left; 
} 
.rest{ 
     float: right; 
     border: 1px solid red; 
     width:80%; 
}