问为什么我的第二个缩略图在第一个下面？我用了内嵌块，但它还在下降
EN

Stack Overflow用户

提问于 2022-11-11 21:18:42

回答 1查看 29关注 0票数 0

我对编码非常陌生，并且试图构建我在互联网上看到的这个YouTube克隆，但我被困住了。我不明白发生了什么事。

我和视频的作者做了同样的事情。但是不知怎么的，我的第二个视频块一直在第一个视频下面，而不是在它的右边。

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;
}

      <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>

我还以为它会出现在旁边呢。有人能向我解释我做错了什么吗？为什么我的街区倒了，而不是在另一边的右边？

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-11 21:28:08

您的主要问题是您没有关闭第一个video-preview div，因此另一个是它的子目录。关于我添加的部分代码(容器)，您可以使用这个有趣的游戏或阅读适当的文档来研究更多关于Flex容器的内容。

我附上了一个工作片段作为例子。

注意:我替换了图像，这样我们就可以在我的片段中运行了。

<!DOCTYPE html>
<HTML>

<head>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <title>youtube.com clone</title>
  <style>
    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;
    }
    
    /* New code*/
    .video-container {
      display: flex;
    }
  </style>
</head>


<body>
  <input class="searchbar" type="textbox" placeholder="search">
  <div class="video-container">
    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="https://picsum.photos/300/200?random=1">
      </div>
      <div class="channel-picture">
        <img class="profile-picture" src="https://picsum.photos/300/200?random=1"> </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>
    <div class="video-preview">
      <img class="thumbnail" src="https://picsum.photos/300/200?random=1">
      <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>
  </div>
  
</body>

</HTML>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74408227

复制

相似问题

问为什么我的第二个缩略图在第一个下面？我用了内嵌块，但它还在下降
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的第二个缩略图在第一个下面？我用了内嵌块，但它还在下降EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的第二个缩略图在第一个下面？我用了内嵌块，但它还在下降
EN