HTML有文字是正确的图像与图像滑块

Question

所以目前我有一个图像滑块在左侧，但该幻灯片中的图被设置为宽度：500％，我想这个文本右边的这个图，但是当我尝试在那里放置文本时，它会落在图像下方。我需要在图形图像滑块右侧的文本和左侧的图像。

#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

添加到图像配滑块财产。

float: left; 

然后创建一个新的div，例如：

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

而属性与.text区段容器

float:right;