Javascript 将两个容器相互推入

在我大学第一年的网络开发项目中，我创建了一个网站，旨在让人们加入烹饪学校

我得到了我想要的分数，但我忘记了这个问题，直到我再次看到这个问题

我有两个容器。第一个容器是幻灯片，显示循环动画中的3个图像

第二个容器是下面的一个条，显示三个容器中显示的图像

现在的问题是，我无法将该条放置在图像容器中。事实上，我有一个奇怪的空白，因为这一点

我尝试过的解决方案： 我使用了

填充

手动移动它（它工作正常，但当我调整屏幕大小或调整屏幕时，该条会被放置在奇怪的位置，这不是一种有效的方法） 我尝试使用

margin:0

我一点也不知道该做什么，所以欢迎任何帮助

我不知道如何在此处包含图像，但下面是一个示例：

这是代码笔：
（我无法包含我项目中的确切图像，因此我包含了猫的图像）

代码如下：

HTML

CSS（幻灯片的核心部分）

CSS点容器

.dot-container {
    padding-top: 15px;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    position: relative;
    padding-top: 1px;
  }
  
  .active,
  .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }

你应该调查并将两者保持在一起，这样就不会涉及CSS体操。这些都是为了解决你现在的问题而设计的。谢谢Randy，我以前遇到过figure和figcaption，但我从来没有充分使用过它们，也没有考虑过它们。再次感谢！你应该调查并将两者保持在一起，这样就不会涉及CSS体操。这些都是为了解决你现在的问题而设计的。谢谢Randy，我以前遇到过figure和figcaption，但我从来没有充分使用过它们，也没有考虑过它们。再次感谢！
/* DO NOT ALTER (CODE UNDERNEATH) */
.mySlides {
  display: none;
}

img {
  vertical-align: middle;
  height: 50%;
  background-size: cover;
  object-fit: cover;
  object-position: 50% 50%;
}
/* DO NOT ALTER (CODE ABOVE) */

/* Slideshow Animation */

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  background-size: cover;
  background: no-repeat center center fixed;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* Disables Slideshow Animation for smaller/less powerful devices */
@media only screen and (max-width: 767px) {
  .mySlides,
  .slideshow-container,
  .prev,
  .next,
  .dot-container,
  .fade,
  .dot {
    display: none;
  } 
} 
  
  /* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #4CAF50;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: #333;
  opacity: 0.8;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  }
  
  /* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

  /* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev:focus,
.next:focus,
.prev:active,
.next:active {
  -webkit-animation-name: pulse-grow-on-hover;
  animation-name: pulse-grow-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

  /* Pulse Grow Animation */

@-webkit-keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* End of Animation */

.dot-container {
    padding-top: 15px;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    position: relative;
    padding-top: 1px;
  }
  
  .active,
  .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }