Как мне сложить несколько картинок поверх друг друга и разместить текст по бокам?

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>

Надеюсь, это поможет,