Question

我正在尝试使用缩略图网格。每个缩略图可以有两个不同高度中的一个，但我希望整行具有相同的高度

enter image description here

可以看出，因为最后两张缩略图较高，其余缩略图被推下来。

当我使用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更长，而且你的div默认情况下将它们对齐到底部。为了解决这个问题，你需要将vertical-align:top;添加到你的班级.item，如果不是我想的话该课程为.thumbnail

.item {
    vertical-align:top;
}

Answer 2

为视频类添加垂直对齐：

vertical-align:top

Div被无形的力量压倒了

2 个答案: