Question

我基本上是在尝试模仿YouTube侧栏，以观看下一个视频。它是静态的，因此只有HTML和CSS，但我尝试过浮动它，而下一个图像仅浮动在上一个图像的旁边。有什么建议么？

.sideBar {
  margin-left: 25px;
  width: 337px;
  height: 900px;
  float: left;
  padding: 10px;
  background-color: white;
}

.video-thumbnail img {
  width: 168px;
  height: 94px;
  margin-bottom: 20px;
  float: left;
}

.videoText {
  float: left;
  margin-left: 15px;
  margin-top: 10px;
}

<div class="sideBar">
  <h4>Up Next</h4>
  <br>
  <div class="recommended-videos">
    <div class="video-thumbnail">
      <img src="https://i">
    </div>
    <div class="videoText">
      <h5>lorem ipsum</h5>
      <h6>ipsum lorem</h6>
    </div>
  </div>
  <div class="recommended-videos">
    <div class="video-thumbnail">
      <img src="https://i.y">
    </div>
  </div>

Answer 1

只需添加一个容器并将溢出设置为隐藏；

查看此修改后的代码

<div class="sideBar">
   <h4>Up Next</h4>
   <br>
  <div class="recommended-videos">
    <div class="video-container">
      <div class="video-thumbnail">
        <img src="https://i">
      </div>
      <div class="videoText">
        <h5>lorem ipsum</h5>
        <h6>ipsum lorem</h6>
      </div>
    </div>
     <div class="video-container">
      <div class="video-thumbnail">
        <img src="https://i">
      </div>
      <div class="videoText">
        <h5>lorem ipsum</h5>
        <h6>ipsum lorem</h6>
      </div>
    </div>
  </div>
</div>

css：

.sideBar {
  margin-left: 25px;
  width: 337px;
  height: 900px;
  float: left;
  padding: 10px;
  background-color: white;
}

.video-thumbnail img {
  width: 168px;
  height: 94px;
  margin-bottom: 20px;
  float: left;
}

.videoText {
  float: left;
  margin-left: 15px;
  margin-top: 10px;
}

.video-container{
  overflow:hidden;
}

Answer 2

尽管这会给您期望的结果，但我有一些建议。

我会避免：

在此处使用标题元素，请改用CSS
不必要的元素嵌套

看看Bootstrap有助于样式化HTML可能是有益的。

.sideBar {
  margin-left: 25px;
  width: 337px;
  height: 900px;
  float: left;
  padding: 10px;
  background-color: white;
}

.video img {
  width: 168px;
  height: 94px;
  margin-bottom: 20px;
  text-align: left;
}

.videoText {
  margin-left: 15px;
  margin-top: 10px;
  display: inline-block;
  text-align: left;
}

<div class="sideBar">
  <h4>Up Next</h4>
  <br>
  <div class='video'>
    <img src="https://i">
    <div class="videoText">
      <h5>lorem ipsum</h5>
      <h6>ipsum lorem</h6>
    </div>
  </div>
  <div class='video'>
    <img src="https://i">
    <div class="videoText">
      <h5>lorem ipsum</h5>
      <h6>ipsum lorem</h6>
    </div>
  </div>
</div>

希望这会有所帮助，

如何将多张图片彼此堆叠，并在其两侧放置文字？

2 个答案: