[SOLUCIONADO] CSS imagen grande y pequeñas con texto al final

[andrea7755]

Buenas no soy expera en css y no se como darle ese estilo para hacer que las noticias salgan como esta.



Mi sistema solo muestra como normalmente es:

Noticia 1
Noticia 2
Noticia 3

Quisiera que eso fuera como la imagen

NOTICIA 1
noticia 2 | noticia 3
noticia 4 | noticia 5

la imagen este arriba del texto y salgan en ese orden, saben alguna manera de hacerlo asi solo con css?
gracias espero tener una ayuda

Aquí tengo el link de como lo tengo con css, pero no se como podría hacerlo como se muestra en la imagen.

CODE:
http://codepen.io/andrea7755/pen/wWNrRz

[Rafael]

Simplemente crea una clase nueva news1 con un ancho del 100%.

Un problema es que a las imágenes de dentro del news las tienes definidas en pixeles. Elimina eso. Pon dentro las imagenes como width: 100%. y elimina el height. Esto hará que las imagenes se adapten al contenedor.

Lo que veo es que tienes cosas un tanto sin sentido, como posiciones relativas. Hay que limpiar ese código.

Te dejo un fiddle https://jsfiddle.net/p5uxpnkx/



Vas a notar dos cosas. Le tiré completamente los classes de cada div, para que sea más rápido modificar simplemente poniendo un div arriba.

El uso de padres e hijos en el CSS parent>div

Código CSS:

.newshome{
    max-width:430px;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    alignt-items:center;
    justify-content:space-between;
}
 
.newshome>div {width: 47%;}
.newshome>div:first-child {width: 100%;}
.newshome>div>img {width: 100%;}
 

Código HTML:

<section class="newshome">
<div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Media Maratón de Lima 2016 permitirá plantar más de 15 mil árboles</p>
</div>
<div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Choferes manejaban sin brevete y debían más de medio millón de soles en papeletas</p>
</div>
</section>
 

[andrea7755]

Me sorprende bastante esto del css, con la manera que lo muestras parece bastante pequeño como a la manera original que lo tenia, muchas gracias ahora procedo con los arreglo para dejarlo parecido, mi pregunta es si puedo limitar el "height" para la imagen principal y las otras 4 también ya que cuando una imagen es mas grande el height crece mas y no llegan a estar ordenadas pero de todas maneras intento hacerlo gracias.

PD: actualice el código muchas gracias de como lo tengo ahora.

[Rafael]

Lo mejor sería que la foto estuviera del tamaño correcto.

Para limitar el tamaño tienes varias opciones, pero básicamente es tener una imagen con un tipo de "clip".

Por lo tanto en lugar de tener una <img> tendrás otro <div> con una <img> dentro.

Luego defines el alto del div y dentro la imagen. Pondrás un overflow: hidden. Revisa estos ejemplos: http://www.w3schools.com/cssref/play...&preval=hidden

Claro que aparte ahora tienes el problema de que la imagen centre, por eso sería mejor que venga ya recortada.

Dependiendo de cómo alimentes tus imagenes también podrías poner las imágenes como fondos del div con background-image: url() y background position: center y background cover http://www.w3schools.com/cssref/css3...round-size.asp

[Rafael]

Recuerda que la cosa es que profundices un poco en la lógica del CSS.