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:
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.
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;}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
0
