necesita divs interiores para alinear top-wise en contenedor div

El div exterior del contenedor tiene dos divs internos - el div interno del lado derecho tiene texto que puede crecer o reducirse en función de la entrada del usuario (para venir más tarde, hay mucho texto) simulado ahora en el texto div estableciendo su altura: 250px). Lo extraño es que a medida que crece la altura del div interno del lado derecho, el div interno del lado izquierdo 'cae' hacia abajo en el div externo. Pongo contornos de colores alrededor de los divs - el div interior izquierdo, el que tiene el problema de "caída" tiene un contorno azul. El 'crecimiento debido al texto ingresado por el usuario' es el div interno a la derecha con el borde morado.necesita divs interiores para alinear top-wise en contenedor div

El contenedor exterior de los 2 div interiores tiene un contorno naranja.

Necesito el div izquierdo con el borde azul para ser 100% NO AFECTADO o no influenciado por la cantidad de texto ingresado. Ese div izquierdo con el borde azul debe permanecer en la esquina superior izquierda del div contenedor externo que tiene el borde naranja.

¿Por qué la altura de una casilla en el div verde del lado derecho empuja hacia abajo el div izquierdo?

Aquí hay un enlace para ver lo que está pasando:

http://jsfiddle.net/Shomer/JSyYY/

Aquí está el código:

<div style="display:inline-block; border: 4px solid orange;"> 
    <div style="border: 2px solid blue; display:inline-block;"> 
     <div style="display:inline-block; border: 1px solid red;">topleft 
     </div> 
     <div style="display:inline-block; border: 1px solid red;">topright 
     </div> 
     <div>lower div 
     </div> 
    </div> 

    <div style="display:inline-block; border: 3px solid purple;"> 
    <div style="display:inline-block; height:250px; border: 1px solid red;"> "text" 
    </div> 
    <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b> 
    </div> 
    <div>&nbsp; </div> 
    </div> 
/div>

Fuente

2011-11-26 wantTheBest

Esa altura de 250px no simula correctamente cómo se verá el texto en el div. Aquí está el texto legal de jsfiddle sin 250px http://jsfiddle.net/JSyYY/1/ –

WOW. No había ingresado una cantidad real de texto hasta que resolví el problema de "caída del lado izquierdo del div". Veo que hay un nuevo problema: ¿por qué la div derecha ahora rellenada con texto ya no está a la derecha del div azul izquierdo? – wantTheBest

Gracias Grillz: establecí un ancho: 150px en el texto ahora mucho más grande a la derecha y que permitía que el div borde derecho del lado izquierdo dejara de forzarse debajo del div borde azul del lado izquierdo. Gracias por el aviso sobre el efecto de "montones de texto" en el diseño. – wantTheBest

Hiyou debe tratar de establecer la Alineación vertical al principio de la div padre de la div blueborder.

<div style="display:inline-block; border: 4px solid orange;" > 
    <div style="border: 2px solid blue; display:inline-block;**vertical-align:top**"> 
      <div style="display:inline-block; border: 1px solid red;">topleft 
      </div> 
      <div style="display:inline-block; border: 1px solid red;">topright 
      </div> 
      <div>lower div 
      </div> 
      <!-- <div>a</div> --> 
    </div> 

    <div style="display:inline-block; border: 3px solid purple;"> 
     <div style="display:inline-block; height:250px; border: 1px solid red;"> "text" 
     </div> 
     <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b> 
     </div> 
     <div>&nbsp; </div> 
    </div> 
</div>

Fuente

2011-11-26 14:22:15

Gracias - eso resolvió el problema de la 'caída del lado izquierdo del borde azul', gracias, ahora veo que agregar mucho texto a la derecha tiene la div correcta caer bajo el div izquierdo, no estoy seguro de por qué – wantTheBest

necesita divs interiores para alinear top-wise en contenedor div

Respuesta

Cuestiones relacionadas