如何使内联块框垂直对齐顶部？

Question

我正在创建自定义缩略图布局，并且每个项目内的内容长度不同，因此缩略图的对齐方式可以向上或向下。是否有任何建议将它们全部排在最前面？

.item{
  display:inline-block;
  width:100px;
  height:80px;
  margin-right:10px;
  }

.item img{
  width:100px;
  height:80px;
    padding:5px;
  background-color:#454545;
    border:1px solid #454545;
  }

.info{
  text-align:center;
  font-size:14px;
  
  }

<div class="container">
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>  
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>    
</div>

Answer 1

您只需添加.item {vertical-align:top;}即可。由于内联框的默认垂直对齐方式为baseline。

＆＃13;

＆＃13;

.item{
  vertical-align: top;
  display:inline-block;
  width:100px;
  height:80px;
  margin-right:10px;
  }

.item img{
  width:100px;
  height:80px;
    padding:5px;
  background-color:#454545;
    border:1px solid #454545;
  }

.info{
  text-align:center;
  font-size:14px;
  
  }

＆＃13;

<div class="container">
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>  
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加.item - vertical-align: top

.item{
  display:inline-block;
  width:100px;
  height:80px;
  margin-right:10px;
    vertical-align: top;
  }

.item img{
  width:100px;
  height:80px;
    padding:5px;
  background-color:#454545;
    border:1px solid #454545;
  }

.info{
  text-align:center;
  font-size:14px;
  
  }

<div class="container">
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>  
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing</div>
  </div>
  <div class="item">
    <img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" />
    <div class="info">Testing Testing Testing Testing Testing Testing</div>
  </div>    
</div>