Div 的内容与另一个 Div 的内容自动缩放
Div's Content Autoscaling with another Div Content
我想避免这个 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%;
}
可以使用flexbox来解决
.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}
我想避免这个 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%;
}
可以使用flexbox来解决
.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}