display divs without blanks - CSS

Question

I'm struggling with some CSS issue. I have a few divs to display, one after another. I'm using the inline block display to display them

I'd like to display divs. The thing is, it appears like that :

I guess it is because of the display style. Because of the shirt-div height, i got some blank spots above the "lone rose" and the "Dim Mak" ones. Is there a way to remove these blanks and to display these divs so they can fill the whole space ?

this is the HTML

{% for prod in articles %}


            <a href="{{ path('dyma_shop_info_article', {'id': prod.id}) }}" id="link_prod">
            <div class="product_detail">
                <img src="{{ asset('uploads/'~prod.name~'/'~random(prod.pictures).picturename) }}" alt="" />
                <div class="prod_title">
                    {{prod.name}}
                </div>
            </div>
            </a>


            {% endfor %}

and this is the CSS for this div

.product_detail
{
float:                              left;
position:                           relative;
width:                              30%;

border:                             1px solid #666;

padding:                            5px;

background-color:                   rgba(255,255,255,0.7);

text-align:                         center;
margin:                             5px;
box-shadow:                         7px 7px 7px #666;
transition:                         0.3s;
}

.product_detail:hover
{
box-shadow:                         12px 12px 12px #666;
transition:                         0.3s;
}

.product_detail img
{
max-width:                          100%;
max-height:                         400px;
z-index:                            99;
}

.prod_title
{
height:                             40px;
line-height:                        40px;
bottom:                             0px;
left:                               0px;
right:                              0px;
padding:                            10px;

margin:                             0;
padding:                            0;

font-size:                          22px;
background-color:                   #fff;


text-align:                         center;
}