CSS apilable div con altura variable en dos columnas

Estoy trabajando en la página de perfil de un usuario en mi sitio web. Y estoy teniendo un pequeño problema con el CSS.CSS apilable div con altura variable en dos columnas

Mi problema es el siguiente: Tengo cuatro cajas div con un ancho fijo pero con alturas variables y me gustaría que se superpongan una encima de la otra.

La imagen de abajo es una captura de pantalla de mi problema, la div con el título "Últimos videos" se debe pegar a la que tiene el título de "información básica". Me gusta "información de contacto" y "foto más reciente".

My problem

Mi html se ve algo como esto:

<div style="margin-left:-10px"> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for basic info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for contact info 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest photos 
    </div> 
    <div class="infoBox" style="width:360px; margin-left:9px"> 
     Content goes here for latest videos 
    </div> 
</div>

La clase CSS para el cuadro de información se parece a esto:

.infoBox { 
    width: 100%; 
    margin: -1px; 
    background-color:#37312d; 
    padding:5px; 
    border:#5b504a solid 1px; 
    margin-bottom:9px; 
    float:left; 
}

¿Cómo se puede hacer para hacer este trabajo?

Fuente

2012-09-10 Joris Blanc

Las estás flotando todas a la izquierda, me imagino que si flotas dos a la derecha y dos a la izquierda obtendrías lo que estás buscando, ¿o me estoy perdiendo algo? –

Siento que algo está fuera de aquí. Hice [un violín] (http://jsfiddle.net/7pm67/1/) en el que hice que el contenedor '760px' de ancho, y todo se alinea. ¿Hay algo más para CSS aquí? Tal vez hay un problema con el contenido en sí mismo? – Eric

esta pregunta podría ser útil http://stackoverflow.com/questions/10302056/workign-with-floating-li-elements-in-footer/10303004#10303004 – Paradise

corto de nesting your divs in columns:

<div class="left-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div> 
<div class="right-column"> 
    <div class="infoBox">...</div> 
    <div class="infoBox">...</div> 
</div>

podría intentar jQuery Masonry. Here's a fiddle demostrando su uso.

Fuente

2012-09-10 18:53:03 crowjonah

Great link, y creo que esto le dará a Joris más fluidez lo que quiera. +1 – KRyan

Voy a analizar esto aunque hubiera preferido una solución que no incluyera javascript. Gracias –

¡Hay muchas soluciones CSS en esta página! [Aquí hay otro violín] (http://jsfiddle.net/crowjonah/pWvsh/) usando divs anidados como columnas. – crowjonah

Usted puede tratar con este código

#bottom{ 
    width: ???px; 
    height: ???px; 
    background-color: black; 
} 
#top{ 
    width:???px; 
    height:???px; 
    background-color:red; 
    z-index: 999; 
} 


<div id="bottom"> 
    <div>......</div> 
    <div id="top">......</div> 
</div>

Fuente

2012-09-10 18:56:07

Usted puede poner las cajas en columnas like so. Este es un sistema de grillas muy básico, pero muestra la idea básica: estás apilando tus cajas dentro de divisores de envoltura que forman columnas.

Si va a repetir este patrón en todo su sitio, es posible que desee utilizar un sistema de grilla más formal. Se pueden encontrar muchos ejemplos simplemente buscando "css grid system".

Fuente

2012-09-10 18:57:09 tuff

le recomiendo que se divide el contenido en dos columnas:

HTML:

<div style="margin-left:-10px"> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for basic info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest videos 
     </div> 
    </div> 
    <div class="column"> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for contact info 
     </div> 
     <div class="infoBox" style="width:360px; margin-left:9px"> 
      Content goes here for latest photos 
     </div> 
    </div> 
</div>

y en su CSS complemento:

.column{float:left; width:50%;}

ACTUALIZACIÓN: las cajas dentro de las columnas de Don Necesito que flote si usa esta solución

Fuente

2012-09-10 18:59:47

El único cambio que le haría a esto sería convertir 'column' en una clase y no en una ID, ya que quiere compartir eso entre múltiples elementos. – mclark1129

gracias @Mike, acabo de arreglar ese –

Esto podría funcionar, voy a intentarlo y ver si es una solución práctica. :) –

La mejor solución que he encontrado para esto i ssue es etiquetar cada publicación con la clase .odd y .even o .left y .right luego simplemente flotar deja las publicaciones impares/izquierdas y flotar a la derecha las publicaciones pares/derecha. Tenga en cuenta que esto solo funciona visualmente si el ancho de las publicaciones se suman al ancho de su contenedor. Luego, para que esto funcione en una variedad de tamaños de pantalla, simplemente agregue una consulta @media para cambiar el flotador en las publicaciones pares/derechas que se dejarán en pantallas más pequeñas que el ancho del contenedor de doble columna.

Fuente

2014-03-19 00:36:37 hyphnKnight

¿Parece que tiene algún código que podría compartir? –

CSS apilable div con altura variable en dos columnas

Respuesta

Cuestiones relacionadas