为何使用inline-block后第二个视频预览块仍位于第一个下方？

我是编程新手，正在跟着网上教程制作YouTube克隆项目，但遇到了布局问题。我完全按照视频作者的操作步骤执行，然而第二个视频预览块并未出现在第一个的右侧，而是位于其下方。我期望两个块能横向并排，以下是我的代码：

CSS代码 #

p{
  font-family:roboto,ariel;
  margin-top:0;
  margin-bottom:0;
}
.searchbar{
  display:block;
}

.video-preview{
  width:300px;
  display:inline-block;
  vertical-align: top;
  margin-right:15px;
}

.thumbnail {
width:300px;
}

.video-title{
  margin-top:0;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  margin-bottom:12px;

}


.channel-picture{

  display:inline-block;
  vertical-align: top;
  width:50px;
}

.video-info{
  display:inline-block;
  width:200px;
}

.profile-picture{
width:40px;
border-radius: 50%;

}

.thumbnail-row{
  margin-bottom:12px;
}

.video-author,.video-stats{
  font-size:12px;
  color:rgb(96,96,96);
}

.video-author{
  margin-bottom:4px;
}

HTML代码 #

<input class="searchbar" type="textbox" placeholder="search">
            
<div class="video-preview">
  <div class="thumbnail-row"> 
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
  </div>
  <div class="channel-picture">
    <img class="profile-picture"src="channel-pictures/channel-1.jpeg"> </div>
<div class="video-info">
 <p class="video-title">
    Talking Tech and AI with Google CEO Sundar Pichai!
 </p>
<p class="video-author">
Marques Brownlee
</p>
<p class="video-stats">
3.4M views · 6 months ago
</p>
</div>

<div class="video-preview">

  <img class="thumbnail" src="thumbnails/thumbnail-2.webp">


<p class="video-title">
    
Try Not To Laugh Challenge #9
</p>
<p class="video-author">
Markiplier
</p>

<p class="video-stats">
  19M views · 4 years ago
</p>

</div>

解决方案 #

问题出在HTML标签的闭合上：第一个.video-preview的<div>没有添加闭合标签</div>，导致第二个.video-preview被嵌套在了第一个里面，自然无法和第一个横向并排。

修正后的HTML代码如下：

<input class="searchbar" type="textbox" placeholder="search">
            
<div class="video-preview">
  <div class="thumbnail-row"> 
    <img class="thumbnail" src="thumbnails/thumbnail-1.webp">
  </div>
  <div class="channel-picture">
    <img class="profile-picture" src="channel-pictures/channel-1.jpeg"> 
  </div>
  <div class="video-info">
    <p class="video-title">
      Talking Tech and AI with Google CEO Sundar Pichai!
    </p>
    <p class="video-author">
      Marques Brownlee
    </p>
    <p class="video-stats">
      3.4M views · 6 months ago
    </p>
  </div>
</div> <!-- 补上第一个video-preview的闭合标签 -->

<div class="video-preview">
  <img class="thumbnail" src="thumbnails/thumbnail-2.webp">

  <p class="video-title">
    Try Not To Laugh Challenge #9
  </p>
  <p class="video-author">
    Markiplier
  </p>

  <p class="video-stats">
    19M views · 4 years ago
  </p>
</div>

当两个.video-preview成为同级元素后，它们的display: inline-block样式就会生效，实现横向并排的效果。

内容的提问来源于stack exchange，提问作者Kenric Dsouza