Mantener divs flotantes en la misma línea

¿Cómo puedo mantener dos elementos en la misma fila con la columna derecha fija? Quiero div derecho a estar con tamaño fijo, y el líquido columna de la izquierda, pero en caso de inserción de texto largo a la izquierda, luego a otro derecho va a la siguiente columna ..Mantener divs flotantes en la misma línea

Ejemplo: http://jsfiddle.net/Jbbxk/2/

¿Hay alguna soluciones de CSS puro?

NB! Wrap div debe tener ancho dinámico! Para fines de demostración, ha corregido witdh, por lo que se ajustará.

¡Salud!

Fuente

2012-07-12 Kristian

Su envoltura tiene una anchura fija. ¿¿¿Qué esperas??? ¿O me estoy perdiendo algo? ¿Rebosar? – PeeHaa

Mi envoltorio en demostración tiene un ancho fijo, pero en mi aplicación tiene un ancho relativo (50%). El tamaño de un contenedor cambia – Kristian

Ésta es una forma común de hacer lo que quiere:

.wrap { 
    position: relative; 
    margin: 5px; 
    border: 1px solid red; 
} 
.left { 
    float: left; 
    background-color: #CCC; 
    margin-right: 48px; 
} 
.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 48px; 
    height: 48px; 
    background-color: #888; 
}

Explicación:

La columna izquierda de la izquierda ocupa todo el ancho pero ahorra espacio para la columna de la derecha con margin-right: [right column width];
El columna fija derecho se coloca en una posición absoluta en la parte superior 0, a la derecha 0 (su lugar correcto)
El envoltura div se asigna position: relative por lo que la posición de la columna derecha se determina de acuerdo a la misma.

Fuente

2012-07-12 12:02:04 pacha

Eso es exactamente lo que estoy buscando ! – Kristian

Usted puede hacer

.left { 
    max-width: 152px; 
}

Fuente

2012-07-12 11:39:50 32bitfloat

No creo que funcione, ya que en su hoja de estilo dice que el ancho del div wrap es dinámico. –

@ 32bitfloat Sí, eso es para demostración, en realidad en mi aplicación es 50%, entonces está cambiando – Kristian

y cuando tenga la anchura dinámica, utilice% como

.left { 
float: left; 
background-color: #CCC; 
width:75%; 
}

He actualizado el enlace de violín: http://jsfiddle.net/Jbbxk/6/

Fuente

2012-07-12 11:46:04 Yasser

Bueno, entendiste lo que quiero, pero de esta manera cuando wrap div es 500px hay un montón de espacio en blanco entre divs – Kristian

En realidad es más fácil de lo que pensaba, simplemente eliminar el flotador: izquierda; de la clase izquierda y puso su derecha objetos encima de ellos flotando en el código HTML

update fiddle

Fuente

2012-07-12 11:57:16

Funciona como un encanto ! ¡Gracias! – Kristian

Sry, mejor solución de @pacha – Kristian

Esta es una solución muy elegante. Sin embargo, el contenido de la columna izquierda (el fluido) puede terminar debajo de la derecha cuando la derecha es más corta en altura, lo que puede o no ser lo que quiere ... – pacha

Aquí hay otra solución. Establecer display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left { 
    /*display: left;*/ 
    display: table-cell; 
} 
.right { 
    float: right; 
    display: table-cell; 
}

Además, el div flotante que ocurra primero:

<div class="right"> 
    &nbsp; 
</div> 
<div class="left"> 
    Looooooooong content - pushes right to next row<br> 
    NOT OK 
</div>

Fuente

2014-04-21 04:58:04 Chloe

Mantener divs flotantes en la misma línea

Respuesta

Cuestiones relacionadas