HTML 使文本与带有图像 slider 的图形保持一致

Question

所以目前我在左侧有一个图像 slider ，但该幻灯片中的图形设置为宽度:500%，我想在该图形的右侧放置文本，但是当我尝试将文本放在那里时，它下降到图像下方。我需要图形图像 slider 右侧的文本和左侧的图像。

#imgslide {
  width: 550px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
#imgslide figure img {
  opacity: .7;
  filter: alpha(opacity=70);
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  width: 20%;
  float: left;
  border-radius: 10px;
}
#imgslide figure img:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  position: relative;
  width: 23%;
  display: block;
  z-index: 999;
}
#imgslide figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite;
}
/* Keyframes */

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: 0%;
  }
}

<div id="imgslide">
  <figure>
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&txt=550%C3%97300&w=550&h=300" alt="">
  </figure>
</div>

Answer 1

将属性添加到 .image-slider。

float: left;

然后新建一个div，例如:

<div id="text-container">
  <p>
    Text example
  </p>
</div>

并将属性放入.text-container

float:right;