我用一些图片制作了缩略图。我使用bootstrap。
在每张图片下面,我想要一个标题。
问题是当标题很大时,它会突破到第二行,使缩略图变得杂乱无章。
这里有什么问题 https://s17.postimg.org/v4116i54f/pic.png
任何人都知道如何解决这个问题?
<div class="col-lg-3 col-sm-6 videoitem">
<div class="b-video">
<div class="v-img">
<a href="single-video-tabs.html"><img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt=""></a>
<div class="time">3:50</div>
</div>
<div class="v-desc">
<a href=".html" >title</a>
</div>
<div class="v-views">
27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
</div>
</div>
</div>
答案 0 :(得分:0)
这里有两种可能性:
强制使用height
,overflow
和text-overflow
或使用某种clearfix
清除每4个项目后的浮动如果您不太关心浏览器支持,您也可以尝试使用flexbox
实现网格的Bootstrap 4
答案 1 :(得分:0)
您可以为标题添加min-height
,也可以像-webkit-line-clamp: 2;
一样使用https://stackoverflow.com/a/13924997/7565713