显示没有空格的div - CSS

Question

我正在努力解决一些CSS问题。我有几个div来展示，一个接一个。我使用内联块显示来显示它们

我想显示div。问题是，它看起来像是：

我想这是因为显示风格。由于衬衫高度的限制，我在“孤独的玫瑰”上方留下了一些空白点。和＆＃34; Dim Mak＆＃34;那些。有没有办法删除这些空格并显示这些div，以便它们可以填满整个空间？

这是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 %}

这是这个div的CSS

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