html - div被无形的力量压下

Question

我想要一个缩略图网格。每个缩略图可以有两种不同高度之一，但我希望整行具有相同的高度

可以看出，由于最后两个缩略图较高，其余的缩略图被压低了。

当我用 Google Devtools 检查它时，没有添加填充或边距，它们只是以某种方式被强制缩小

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&amp;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&amp;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&amp;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&amp;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&amp;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>

非常感谢任何帮助

Answer 1

这是因为其他 div 的标题比其他的长，而您的 div 默认将它们对齐底部。要解决此问题，您需要将 vertical-align:top; 添加到您的类 .item，如果不是我认为类是.thumbnail

.item {
    vertical-align:top;
}