Как установить остальную ширину в правый элемент 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, но если вы используете float:left на фиксированном DIV вы можете использовать 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%; 
}