html - Div being pushed down by invisible force -
i trying have thumbnail grid. each thumbnail can have either 1 of 2 different height, want whole row have same height
as can seen, because last 2 thumbnails higher, rest get's pushed down.
when inspect google devtools, no padding or margin has been added, they're being forced down somehow
css:
.video { display: inline-block; width: 220px; height: 250px; margin: 0 0 15px 15px; h4 { margin-top: 5px; } .thumbnail { padding: 0px; border: none; background: none; // box-shadow: 5px 5px 15px -6px; .caption { word-break: break-all; } } } html:
<div class="row"> <div class="col-xs-12"> <div class="videolist"> <div class="video"> <div class="item"> <div class="thumbnail"> <img src="https://i.ytimg.com/s_vi/yxqdrjjiqjy/hqdefault.jpg?sqp=cnjotkgf&rs=aon4clax8dw9kp4w6xdvecr73qmloeodnw" alt="thumbnail"> <div class="caption"> <h4><span class="title">my slideshow</span></h4> <ul class="list-inline"> <li>1 views</li> <li><i class="fa fa-thumbs-o-up"></i> 0</li> <li><i class="fa fa-thumbs-o-down"></i> 0</li> <li><i class="fa fa-comment-o"></i> 0</li> </ul> </div> </div> </div> </div> <div class="video"> <div class="item"> <div class="thumbnail"> <img src="https://i.ytimg.com/s_vi/ii7ffpgdu6a/hqdefault.jpg?sqp=cnjotkgf&rs=aon4clau-ezif1lm8rxcvnrepjnfvhgvta" alt="thumbnail"> <div class="caption"> <h4><span class="title">my slideshow</span></h4> <ul class="list-inline"> <li>1 views</li> <li><i class="fa fa-thumbs-o-up"></i> 0</li> <li><i class="fa fa-thumbs-o-down"></i> 0</li> <li><i class="fa fa-comment-o"></i> 0</li> </ul> </div> </div> </div> </div> <div class="video"> <div class="item"> <div class="thumbnail"> <img src="https://i.ytimg.com/s_vi/gb9syw4zi2o/hqdefault.jpg?sqp=cnjotkgf&rs=aon4cldbbxf49sypgvhckj6qqycwp3xpea" alt="thumbnail"> <div class="caption"> <h4><span class="title">my slideshow</span></h4> <ul class="list-inline"> <li>0 views</li> <li><i class="fa fa-thumbs-o-up"></i> 0</li> <li><i class="fa fa-thumbs-o-down"></i> 0</li> <li><i class="fa fa-comment-o"></i> 0</li> </ul> </div> </div> </div> </div> <div class="video"> <div class="item"> <div class="thumbnail"> <img src="https://i.ytimg.com/s_vi/b7dk2demkyi/hqdefault.jpg?sqp=cnjotkgf&rs=aon4clc6ubwetho-vmmsozu-cg1zno88vq" alt="thumbnail"> <div class="caption"> <h4><span class="title">my slideshow</span></h4> <ul class="list-inline"> <li>1 views</li> <li><i class="fa fa-thumbs-o-up"></i> 0</li> <li><i class="fa fa-thumbs-o-down"></i> 0</li> <li><i class="fa fa-comment-o"></i> 0</li> </ul> </div> </div> </div> </div> <div class="video"> <div class="item"> <div class="thumbnail"> *<img src="https://i.ytimg.com/s_vi/9nizjdeeece/hqdefault.jpg?sqp=cnjotkgf&rs=aon4clc5vfvmjpalw-k5coknauue2ftorg" alt="thumbnail"> <div class="caption"> <h4><span class="title">john lennon - imagine (rock instrumenta...</span></h4> <ul class="list-inline"> <li>38 views</li> <li><i class="fa fa-thumbs-o-up"></i> 0</li> <li><i class="fa fa-thumbs-o-down"></i> 3</li> <li><i class="fa fa-comment-o"></i> 0</li> </ul> </div> </div> </div> </div> any appreciated
it's because other divs have longer titles others , div aligning them bottom default.to fix problem you'll need add vertical-align:top; class .item, if not think class .thumbnail
.item { vertical-align:top; }
Comments
Post a Comment