Varias cajas CSS en web

moltimix · #1 (**permalink**) 10/05/2011, 06:56

Hola.

Estoy montando una web con noticias. Cada noticia irá en una <div> y en cada línea tendré 3 noticias.

Las noticias tendrán todas la misma anchura por lo que es sencillo ajuntarlo pero la altura será distinta en cada una.

Lo que quiero es que se ajuste entre capas con la altura. Es decir que si,

FILA1
- Noticia 1: 100px de altura
- Noticia 2: 90px de altura
- Noticia 3: 125px de altura

FILA2
- Noticia 4: 90px de altura
- Noticia 5: 90px de altura
- Noticia 6: 80px de altura

Lo que quiero es que las noticias 4,5,6 se ajusten a las que tienen arriba dejandose separacion de x pixeles pero que las noticias 4,5,6 no se queden alineadas verticalmente entre sí.

Muchas gracias.

IsaBelM · #2 (**permalink**) 10/05/2011, 07:34

para eso tendrás que montar los div mas o menos así

Cita:

<div id="cont">

<div class="alineacion">
<div>Noticia1</div>
<div>Noticia4</div>
</div>

<div class="alineacion"">
<div>Noticia2</div>
<div>Noticia5</div>
</div>

<div class="alineacion">
<div>Noticia3</div>
<div>Noticia6</div>
</div>

</div>

#cont div.alineacion {display: inline-block;}

moltimix · #3 (**permalink**) 10/05/2011, 08:11

Pero con este código que adjuntas cada fila de noticias quedaría alineada verticalmente hacia abajo ('bottom').

Lo que yo quiero es que las noticias se ajusten hacia arriba y que no sigan un orden vertical de línea.

Adjunto ejemplo: http://www.imagengratis.org/images/2011051016123.jpg

Esto es lo que tengo ahora mismo, y quiero que esas dos filas suban hacia arriba las noticias y que las 2 primeras noticias de la segunda fila suban aunque sobrepase la línea base de la primera fila.

willyfc · #4 (**permalink**) 10/05/2011, 08:21

Según tu imagen, siempre habrá la misma cantidad de cajas por línea?, tienen un alto fijo?, por cierto si ya lo tienes hasta ahí, sería bueno que subas tu code

willyfc · #5 (**permalink**) 10/05/2011, 08:38

fijate si esto te sirve :

http://techtastico.com/post/framework-css-1-linea/

moltimix · #6 (**permalink**) 10/05/2011, 08:51

Las noticias no tienen un alto fijo, solo un ancho, por eso es mi problema.

La primera línea contendrá dos noticias (la primera más grande será como dos pequeñas) y el resto de líneas van a tener 3.

Adjunto código:

Código:

<div id="col_izquierda">	
	<!-- FILA 1 // Noticias -->
		<div class="noticia_g">
			NOTICIA 1
		</div>

		<div class="noticia_p2">
			NOTICIA 2
		</div>	
	
	<!-- FILA 2 // Noticias -->
		<div class="noticia_p">
			NOTICIA 3
		</div>
		
		<div class="noticia_p2">
			NOTICIA 4
		</div>
	
		<div class="noticia_p2">
			NOTICIA 5
		</div>	
</div>

Código:

#col_izquierda{
	background-color:#F0F0F2; 
	width: 690px;
	float:left;	
	margin: 2px;
        height: 100%;
	border: 0px;
}
.noticia_p{
	width:200px;
	height:100%;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6;
	border: 1px solid #5D6588;
	float:left;
	display: inline-block;
	
}
.noticia_p2{
	width:200px;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6;
	border: 1px solid #5D6588;
	display: inline-block;
	
}
.noticia_g{
	width:438px;
	height:100%;
	margin:5px 5px 5px 5px;
        padding: 5px;
	background-color:#E6E6E6; 
	border: 1px solid #5D6588;
	float: left;
	display: inline-block;
}

Actualmente sale:

Lo que realmente quiero es:

Es decir que se adapten todas las noticias hacia arriba.

IsaBelM · #7 (**permalink**) 10/05/2011, 11:58

yo me basé en tu primero (2 filas con 3 noticias cada una). por si a alguien le puede interesar, se trata de esto

Cita:

<!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>
<style type="text/css">
#cont {width: 440px; border: 1px solid green;}
#cont div.alineacion {display: inline-block; width: 100px; vertical-align: top; margin: 0 20px;}
.alineacion div {width:100px; border: 1px solid red; margin: 20px 0;}
</style>
</head>
<body>
<div id="cont">

<div class="alineacion">
<div><b>Noticia1</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia4</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit.</div>
</div>

<div class="alineacion"">
<div><b>Noticia2</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
<div><b>Noticia5</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>

<div class="alineacion">
<div><b>Noticia3</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia6</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
</div>

</div>

</body>
</html>