html - imagen - 2 divs alineados uno al lado del otro, ¿cómo hacer un ancho de relleno div correcto al 100%?

alinear imagen ala derecha html

Question

Me pregunto cuál es la mejor manera de hacer esto ...

Tengo 3 div s:

• un div#container con width=100%; que contiene 2 div s interiores

• un div#inner_left con width cambiando dinámicamente, pero no más de 200px (contendrá una imagen del producto)

• un div#inner_right donde el ancho debe llenar el resto del espacio en el contenedor (contendrá texto para describir el producto mostrado)

  #container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }

El problema es que el div#inner_right crea un salto de línea y llena todo el ancho. ¿Cómo puedo hacer que se alineen uno junto al otro, con el div derecho tomando en cuenta el ancho tomado por el div izquierdo (que cambia dinámicamente?). Conseguí que esto funcionara de otras maneras, pero estoy buscando una solución limpia ...

Cualquier ayuda para un noob CSS es muy apreciada!

Answer 1

Aquí hay un método fácil para lograr esto, y esto es algo que se necesita con bastante frecuencia. También está probado para que funcione con todos los navegadores, incluidos los muy antiguos (avisen si no funciona).

Enlace a una muestra: https://jsfiddle.net/collinsethans/jdgduw6a/

Aquí está la parte HTML:

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

Y el correspondiente SCSS:

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

Si no está utilizando ningún preprocesador de CSS, reemplace $ left_width con su valor (200px aquí).

Crédito: se basa en http://htmldog.com/examples/pagelayout2/ . Hay varios otros útiles allí.

Answer 2

Eche un vistazo a los " diseños líquidos " que pueden describir de lo que está hablando.

Probablemente estés buscando este .

En su ejemplo, intente configurar su pantalla en línea. Sin embargo, técnicamente no podrá utilizar elementos de nivel de bloque en él, así que eche un vistazo a los enlaces que publiqué anteriormente. :)

El problema con establecer el ancho al 100% si está utilizando flotadores es que se considera el 100% del contenedor, por lo que tampoco funcionará ya que el 100% incluye el ancho del div izquierdo.

Edición : Here está el ejemplo de la otra respuesta, lo he editado para incluir el html / css del sitio de ejemplo anterior para simplificar.

También lo incluiré a continuación:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

Answer 3

Entonces, aunque solo quería hacer esto con CSS, terminé usando tablas ...

Answer 4

Esto se basa en la respuesta de @ w00. +1 amigo.

Mi situación fue cuando quería mostrar un par de iconos junto a una etiqueta. Utilizo la clase de fluido para lo que es donde entra en juego el nowrap. Esto es para que los iconos aparezcan en la misma línea.

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}

Answer 5

Esto se puede lograr usando Flex-Box, que se ha introducido con CSS3 y, de acuerdo con Can I use, es un navegador cruzado.

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}

<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>

Answer 6

Realmente no he visto una buena solución en las respuestas aquí. Así que voy a compartir la mía.

La mejor manera de hacerlo es mediante el uso de la opción de table-cell en CSS. Una cosa importante para agregar es un ''ancho mínimo'' al elemento que tiene un ancho de píxel.

Ejemplo:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

Answer 7

Uso flotante

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

Edición: lea esto, es una buena guía: quirksmode

Answer 8

necesitas proporcionar una posición: propiedad de estilo absoluta tanto a tus divs