Html 显示不带空格的div-CSS

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

我想展示div。事情是这样的：

我想这是因为展示风格。因为衬衫的高度，我在“孤独的玫瑰”和“暗淡的麦片”上面留下了一些空白点。有没有办法删除这些空白并显示这些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 %}

---

请发布您的HTML和CSS。您是否尝试使每个div浮动？可能的解决方案是jQuery砌石，或者CSS多列布局。顺便说一句，您没有使用display:inline block；在你发布的代码中。

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