CSS - Posicionamiento de noticias

   
Vista:

Posicionamiento de noticias

Publicado por Francisco (2 intervenciones) el 31/03/2017 12:05:15
Buenas,

Tengo un js que coge noticias de un blog para ponerlas en la web. Este js coge del blog las 8 primeras noticias y las publica. La idea es que la página publique las noticias de 2 en 2, entonces utilicé la propiedad inline block y asigné a las noticias un ancho de 45%, de esa manera al llegar a la 3ª noticia como no tenía espacio a continuación de las otras 2 se bajaba abajo. Eso funcionaba a la maravilla pero el problema es que dentro de esas noticias se publica 1 imagen, y hay imágenes en horizontal o vertical, entonces si coincide que la noticia 1 es horizontal y la 2 es vertical, cuando llegamos a la 3 se crea un espacio en blanco grande entre la noticia 1 y 3, ya que coge la altura de la mayor.

Dicho esto, y espero haberme explicado, lo que quiero es que publique la noticia1, la 2 al lado, la 3 abajo pero justo debajo de la 1, la 4 al lado de la 3 y justo debajo de la 2....es decir, que no haya espacios entre las noticias de la fila de arriba y la de abajo. Entonces una solución que apliqué es que el js divida las noticias con índice par y las envíe a un div class=columna1 y las impares a un div class=columna 2. Aquí empieza el código css:

1
2
3
4
5
6
7
8
.columna1{
          width:45%;
          float:left;
}
columna2{
          width:45%;
          float:right;
}
Esto parecía ser la solución definitiva, pero... observo un fallo: Si la noticia 1 tiene menos alto que la 2 funciona perfecto, porque la 3 queda justo debajo de la 1 y la 4 justo debajo de la 2. Sin embargo, si la noticia 1 tiene más alto que la 2, al llegar a la 3 el bloque no es capaz de posicionarse a la izquierda porque está ocupado por la 1 todavía por lo que se queda en tierra de nadie.

Si pongo un clear:left; en columna 1 se arregla, pero claro...estaríamos en el mismo caso de inline-block, deja un alto.

Alguien me puede ayudar?
Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Posicionamiento de noticias

Publicado por xve (409 intervenciones) el 31/03/2017 20:21:29
Hola Francisco, este es un problema común con el float:left... hay varias maneras de solucionarlo... la mas sencilla es poner un height fijo, de esta manera siempre te quedara bien!!!

Hay maneras mas complicadas... si quieres te puedo preparar un ejemplo...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Posicionamiento de noticias

Publicado por Francisco (2 intervenciones) el 02/04/2017 17:16:32
Muchssas gracias por contestar. Me gustaria que el alto fuera variable, hay otra solucion con alto variable??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar