0

I added this to a wordpress theme but the new images post vertically instead of horizontal. I would like the new images to display on the green line instead of the red line on the image: IMAGE. Any help would be great.

HTML:

<section>
<img src="https://unsplash.it/700/345?image=564" />
<img src="https://unsplash.it/700/550?image=587" />
<img src="https://unsplash.it/700/450?image=589" />
<img src="https://unsplash.it/700/500?image=421" />
<img src="https://unsplash.it/700/300?image=455" />
<img src="https://unsplash.it/700/150?image=406" />
<img src="https://unsplash.it/700?image=594" />
<img src="https://unsplash.it/700/450?image=417" />
<img src="https://unsplash.it/700/400?image=410" />
<img src="https://unsplash.it/700/550?image=582" />
<img src="https://unsplash.it/700/175?image=591" />
<img src="https://unsplash.it/700/345?image=421" />
<img src="https://unsplash.it/700/567?image=572" />
<img src="https://unsplash.it/700/978?image=401" />
<img src="https://unsplash.it/700/654?image=388" />
<img src="https://unsplash.it/700/500?image=423" />
</section>

CSS

section {
     column-width: 300px;
     column-gap: 5px;
     padding: 5px;
}

section img {
     width: 100%; 
}
  • 1
    You can't do that with CSS. If you didn't want columns...why are you using them? - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css There's a reason why masonry.js exists...and this is it. – Paulie_D Jan 28 '16 at 10:48
  • If I get your question right, basing on what we can see on the image, since the images are overpopulating the `
    ` already, it flows down. Do you have a link to the website that you are building so we can see?
     – ickyrr Jan 28 '16 at 10:48

2 Answers2

0

Please use like this for masonry layout.

 article {
      -moz-column-width: 13em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
}

section {
     width: 100%; 
     display: inline-block;
}
<article>
<section>
<img src="https://unsplash.it/700/345?image=564" />
</section>
<section>
<img src="https://unsplash.it/700/550?image=587" />
</section>
<section>
<img src="https://unsplash.it/700/450?image=589" />
</section>
<section>
<img src="https://unsplash.it/700/500?image=421" />
</section>
<section>
<img src="https://unsplash.it/700/300?image=455" />
</section>
<section>
<img src="https://unsplash.it/700/150?image=406" />
</section>
<section>
<img src="https://unsplash.it/700?image=594" />
</section>
<section>
<img src="https://unsplash.it/700/450?image=417" />
</section>
<section>
<img src="https://unsplash.it/700/400?image=410" />
</section>
<section>
<img src="https://unsplash.it/700/550?image=582" />
</section>
<section>
<img src="https://unsplash.it/700/175?image=591" />
</section>
<section>
<img src="https://unsplash.it/700/345?image=421" />
</section>
<section>
<img src="https://unsplash.it/700/567?image=572" />
</section>
<section>
<img src="https://unsplash.it/700/978?image=401" />
</section>
<section>
<img src="https://unsplash.it/700/654?image=388" />
</section>
<section>
<img src="https://unsplash.it/700/500?image=423" />
</section>
</article>
Rahul S
  • 643
  • 5
  • 11
  • Did you checked. You mentioned you need masonry layout right? – Rahul S Feb 09 '16 at 05:25
  • Let me know when you've found your brain. Thank you! –  Feb 09 '16 at 20:52
  • Better let me know when you post question correctly and mention exactly what you want thank you ! – Rahul S Feb 11 '16 at 15:20
  • I was specific in what I desired, and you understood what I desired but I think when you rewrote the code you rushed or didn't test it. –  Feb 12 '16 at 17:52
  • I answered what you asked for Masonry layout....I have tested the code....did you run the code there?The way you added was not correct. I have changed a bit and added. Please Run code snippet for masonry layout – Rahul S Feb 13 '16 at 18:12
0

This can be done using Bootstrap Grid View.
Complete details can be found HERE.

The theory is, Bootstrap grid is having 12 columns by default.
If you want 3 columns in a row, you'll divide 12 by 4.
It will produce 3 columns in a row. You can see example on Bootstrap Grid Link.

Mustaasam Saleem
  • 166
  • 8