------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------
|<------------------------- 100% width ----------------------->|
Así que tengo el diseño anterior. El cuadro de la izquierda siempre debe ser lo más pequeño posible, mientras que el derecho debe ocupar el espacio restante. Eso normalmente estaría bien con un float: left
.CSS: Dos campos, uno izquierdo ancho flexible, uno derecho ocupa el espacio restante
El problema es que el cuadro de la derecha puede crecer mucho, mientras que el izquierdo es más o menos la garantía de ser muy pequeño (sin embargo, varía en tamaño, por lo que debe ser flexible). Si el cuadro de la derecha crece, necesito que se comporte de esta manera:
------------- --------------------------------------------------
| some text | | quite a lot of text, actually, really quite a |
------------- | bunch of it, you could say this is really |
| quite a heck of a lot of text |
--------------------------------------------------
Si uso un float:left
, el cuadro de la derecha se alineará a la ruptura bajo el cuadro de la izquierda si contiene una gran cantidad de texto:
-------------
| some text | (not good)
-------------
----------------------------------------------------------------
| quite a lot of text, actually, really quite a bunch of it, |
| you could say this is really quite a heck of a lot of text |
----------------------------------------------------------------
Si utilizo una tabla para ambos en su lugar, el cuadro de la izquierda puede crecer innecesariamente si ambos contienen muy poco texto:
(not good)
-------------------------------- -------------------------------
| some text | | not that much text |
-------------------------------- -------------------------------
por otra parte, no se supone que el cuadro de la izquierda a la línea de rotura. Pero dado que contiene algunos elementos HTML, no solo texto puro, un no-wrap
no parece funcionar en todos los navegadores.
¿Cuál es una buena solución a este problema?
EDITAR
En realidad no es terriblemente importante que el cuadro de la derecha ocupa el ancho restante, sólo que siempre permanece unida a la parte derecha del cuadro de la izquierda.
¿Estás obligados a tener el cuadro de la izquierda fuera de la caja de la derecha en el html – Stobor
@Stobor: No, el HTML es perfectamente flexible. – deceze