Divs con alturas diferentes

Citar

Escrito el 18 Jul 2012 05:48 pm

Bien lo que quiero hacer es justo lo que aparece en esta imagen. Tengo divs de diferentes alturas y me gustaria que independientemente de esta los divs se coloquen como en la imagen. He probado con display:inline y no funciona, actualmente lo tengo con float:left. He barajado la opción de hacer dos columnas pero el tema es que los divs se van incluyendo dinamicamente y preferiria no recurrir a esto.

http://subefotos.com/ver/?623da847a69966f3ac20336737f170f5x.png#codigos

Por lusifer

43 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 18 Jul 2012 06:11 pm

la imagen no se ve, pero si no entiendo mal lo que queres hacer es que se coloquen dos divs uno al lado del otro sin importar su altura, eso lo conseguis con display: inline-block y dandole el ancho correspondiente (del 50% si es que son solamente dos) y acordate de tener en cuenta los margenes y los paddings

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 18 Jul 2012 11:58 pm

SinSemilla escribió:

la imagen no se ve, pero si no entiendo mal lo que queres hacer es que se coloquen dos divs uno al lado del otro sin importar su altura, eso lo conseguis con display: inline-block y dandole el ancho correspondiente (del 50% si es que son solamente dos) y acordate de tener en cuenta los margenes y los paddings

MIra esta imagen que se entenderá mejor, el display inline-block no me funciona, si lo complicado es que debe ser dinamico porque se van añadiendo poco a poco distintos divs con distintas alturas.

http://subefotos.com/ver/?2e4da3ff9c1ac5fc0793e638072dbb32o.png#codigos

Por lusifer

43 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 19 Jul 2012 12:14 pm

Pero no tenes ningún problema con los altos, si los pones en display inline-block se van a mostrar en linea, ahora para que te queden siempre dos, tenes que darle el ancho adecuado a los divs... si te estan quedando en fila de a uno es porque el ancho es mayor al que necesitas.
Saludos

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 20 Jul 2012 04:29 pm

A ver e hecho un ejemplo para ver si encontramos una solucion

Código HTML :

<!DOCTYPE html>
<html>
    <head>
    </head>
   <body>
    
       <div id='contenedor'>
        
           <div id='caja'>111111111111111111111111111111111111111111111 </div>
            
                <div id='caja'> 2 </div>
            
                <div id='caja'>3</div>
            
                <div id='caja'> 4</div>
            
                <div id='caja'>55555555555555555555555555555555555555555555555</div>

                <div id='caja'>6</div>
        
        </div>
    
    </body>
</html>

Código CSS :

@charset "UTF-8";
/* CSS Document */

#contenedor{
   background-color:green;
   width:500px;
   height:auto;
   position:relative;
   padding:20px;
   overflow:hidden;
   
   }

#caja{
   background-color:black;
   width:200px;
   height:auto;
   position:relative;
   margin-top:2px;
   margin-right:5px;
   display:inline-block;
   word-break:break-all;
   color:white;
   }

Y el resultado seria este

[img]http://postimage.org/image/5uwji63rb/[/img]

Por lusifer

43 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Jul 2012 07:50 pm

puedes crear 2 div principales 1 que contenga 3 div dentro y el otro 2 y asi puedes hacerlo

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 20 Jul 2012 11:18 pm

La idea de usar id es que sean unicos... para eso usa una clase

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 23 Jul 2012 09:53 am

Eclypse escribió:

puedes crear 2 div principales 1 que contenga 3 div dentro y el otro 2 y asi puedes hacerlo

Esa es la idea que tenia, hacer dos columnas por separado y meter los divs dentro, pero intentaba buscar otra solución porque se introducen dinamicamente, y luego tengo que ordenador esos divs por criterios etc

Por lusifer

43 de clabLevel

Envíale un mensaje privado

Divs con alturas diferentes

Escribe una respuesta rapida