CSS box layout
Hola!
Estoy maquetando mi portfolio y no consigo dejarlo como quiero.
Es un grid de imagenes que ocupan toda la pantalla, son cajas de 210 x 280, si hago todas iguales no hay problema.
La cuestión es que quiero que algunas cajas sean el doble de grandes para que destaquen. Esas cajas grandes desplazan todas las cajas que hay debajo y no consigo que las cajas pequeñas se acomplen perfectamente, creando una estructura tipo tetris.
Ahora mismo tengo esto:
.box { width: 210px; height:280px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#FFFFFF; padding:5px; float: left; display:block;}
.big_vertical { width: 210px; height:600px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#FFFFFF; padding:5px; float: left;}
Alguien me puede echar un cable.
Muchas Gracias
albatros
Mira creo que tienes que crearte un div que sirva como columna
te paso un ejemplo que he hecho con tus estilos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
.box { width: 210px; height:280px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#f4f4f4; padding:5px; float: left; display:block;}
.big_vertical { width: 210px; height:600px; margin-bottom: 30px; margin-right:10px; color: #636363; background-color:#fabada; padding:5px; float: left;}
.columna {width:230px; float:left}
</style>
</head>
<body>
<div class="columna">
<div class="box">
pojsdvipdipvn
</div>
<div class="big_vertical">
pojsdvipdipvn
</div>
<div class="box">
pojsdvipdipvn
</div>
</div>
<div class="columna">
<div class="big_vertical">
pojsdvipdipvn
</div>
<div class="box">
pojsdvipdipvn
</div>
<div class="box">
pojsdvipdipvn
</div>
</div>
<div class="columna">
<div class="box">
pojsdvipdipvn
</div>
<div class="big_vertical">
pojsdvipdipvn
</div>
<div class="box">
pojsdvipdipvn
</div>
</div>
</body>
</html>
viebone
Ostras!!! No se me había ocurrido.
Estas anidando tres cajas dentro de una columna no??? Ummmmm
Voy a ver como juego con esto por que mi intención es que si estiras el navegador la cuadricula tenga más columnas, de uno en uno.
Buena idea, gracias!!!!
albatros
NO sé como querías plantearlo si por columnas y en cada columna metes las diversas cajas ... también puedes crearte una especia de tabla
con los display inline table y luego los table cell etc.... depende de como quieras plantearlo
Saludos
phpninja
Puede ser que estés buscando algo como esto ?
Masonry jquery plugin
http://masonry.desandro.com/
Royo pinterest.
Las cajas ocuparan todo el ancho de la pantalla y se situarán de forma de inmediata, permitiendo diferentes alturas de las cajas, y manteniendo siempre el mismo ancho.
viebone
phpninja, es eso exactamente lo que quiero, tal cual.
Intentaba evitar el uso de javascript, no se por que pense que lo podría conseguir con html y css unicamente.
Es mas, si el theme que estoy utilizando usa ese plugin y yo lo he desactivado por que no coseguía dominar bien la maquetación de as cajas.
Voy a intentar trabajar en la idea de Albatros a ver si puedo evitar el uso de javascript.
Lo que estoy haciendo es modificar un theme de wp para añadiendo un parametro a cada post tipo: Vertical-grande, horizontal-grande, normal, poder jugar con la maquetación y destacar ciertos trabajos.
La idea es pinterest pero un poquito más ordenado.
Gracias a los dos, a ver si consigo sacarlo.
Cloudstudio
Porque no usar jquery ? sinceramente masonry es la mejor opcion para lo que quieres con diferencia.
viebone
Buenisimo el masonry!!!
Además soy un pardillo por que el propio theme que estoy modificando lo usaba, lo que pasa que nada más cogerlo quite todo el javascript sin mirar ni siquiera lo que hacía.
Muy recomendable para este tipo de maquetación.
Gracias a todos!!!