Div 的内容与另一个 Div 内容自动缩放

Question

我想避免这个 CSS 自动缩放错误，它会为长电影名称留下巨大的空白。有人可以帮我解决它吗？这是我的 DIV 和 CSS 代码。

HTML：

<div class="col-md-2 w3l-movie-gride-agile">
                                <a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
                                    <div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
                                </a>
                                <div class="mid-1 agileits_w3layouts_mid_1_home">
                                    <div class="w3l-movie-text">
                                        <h6><a href="single.html">Maléfica: La dueña de Mal</a></h6>                            
                                    </div>
                                    <div class="mid-2 agile_mid_2_home">
                                        <p>2019</p>
                                        <div class="block-stars">
                                            <ul class="w3l-ratings">
                                                <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i>7.4</a></li>
                                                
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div class="ribben">
                                    <p>NEW</p>
                                </div>
                            </div>

CSS：

.w3l-movie-gride-agile {
    text-align: center;
    box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
    margin-right: 0%;
    margin-bottom: 3%;
    position: relative;
    padding-left: 0;
}
.col-md-2 {
    width: 16.66666667%;
}

Answer 1

你可以使用flexbox来解决这个问题

.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}