Column of Wordpress posts without white space above - php

Question

I built a blog under wordpress. I am searching for a way to display article like this :
the php / html
<div id="uno">
<?php the_title(); ?>
<?php the_excerpt();?>
Read more...
</div>
and the css
#uno{width: 25%; height:100%; float:left; text-align:center; padding-top: 20px;}

Answer 1

Have a look to isotope/masonry => http://isotope.metafizzy.co/layout.html

Answer 2

What's happening is your images are of different sizes so the gaps look different and because one image was larger then the others that's the primary gap for the following images.
One way I found that fixed this in my case was to navigate to your functions.php file and add this line of code in
add_theme_support( 'post-thumbnails' );
add_image_size( 'myimage', 100, 100 );
change the myimage portion to what ever you like and the sizes that you would like your image to be fixed as.
After that you can then pull your image using <?php the_post_thumbnail('myimage', array( 'class' => "our-size")); ?>
also just to be safe you could add some css.
.our-size {
height: 100px;
width: 100px;
max-width: 100px;
max-height: 100px;
margin-bottom: 2px;
}

Answer 3

Here is the solution: using isotope.
css :
.grid-image-item,
.grid--images .grid-sizer { width: 25%;}
.grid-image-item {
float: left;
}
.grid-image-item img {
display: block;
max-width: 100%;
}
home.php :
load "isotope-docs.min.js" on the top of your page, juste bellow "get_header" using this
<script src="where-you-placed-it/isotope-docs.min.js">
</script>
<div class="duo__cell example__demo">
<div class="grid grid--images" data-js-module="imagesloaded-progress">
<div class="grid-sizer"></div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="grid-image-item">
<?php the_title(); ?>
<?php the_author() ?>
<?php the_time('j M Y') ?>
<?php the_category(', ') ?>
<?php the_excerpt();?>
<?php echo get_permalink(); ?>
</div>
<?php endwhile; ?>
</div>
</div>
</div>