Todo lo que intento hacer es configurar width: {the rest of width} en un elemento que tenga la propiedad float:right. Aquí está mi código:

.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>

¿Cómo puedo llenar ese vacío? Esta es la salida esperada:

enter image description here

1
stack 16 feb. 2017 a las 20:11

3 respuestas

La mejor respuesta

No estoy seguro de cuán flexible es en el CSS, pero si usa float:left en el div fijo, puede usar overflow:auto en el correcto.

.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>

Si necesita flotar el contenido real del div derecho, aún a la derecha, puede agregar un contenedor de contenido para flotar dentro.

.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>
1
Nope 16 feb. 2017 a las 17:26

Use calc para restar el valor.

.rest{
  float: right;
  border: 1px solid red;
  width: calc(100% - 80px);
}
1
Donnie D'Amato 16 feb. 2017 a las 17:14

Aplicar ancho en%

.fix{ 
      border: 1px solid blue;     
      width: 20%;     
      display:inline-block;    
      float:left;
}
 .rest{ 
      float: right; 
      border: 1px solid red; 
      width:80%; 
}
0
Kiran Reddy 16 feb. 2017 a las 17:20