Javascript 脚本图像赢得'；不要用文字换行

只是尝试将一些文本与右侧的图像对齐，该图像使用javascript在两个图像之间进行转换。我需要的过渡效果保持，但也能够有文字包装到它在同一个容器的左侧。有人能帮忙吗

HTML

---

假设我明白你想做什么

您可以将文本和图像分别放在#maincontent元素的不同div标记中，然后将它们与自己的css并排对齐。从技术上讲，它们不像您所说的那样位于同一个容器中，但它们仍然位于#maincontent容器中

这是我的建议，希望能有所帮助。请注意，我包括了随机图像在你的淡入淡出效果的地方

<div id="maincontent">
    <div id="content-box">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
    </div>
    <div id="image-box">
        <img name="slides" width="500px" id="slides" src="images/mybike.jpg" />
        <img name="slides" width="500px" id="slides" src="images/racergreen.jpg" />
    </div>
</div>

body {
font-family: 'Arial', sans-serif;
background-color: #000;

}

#wrapper {
max-width: 1000px;
margin: 0 auto;
background-color: #fff
padding: 32px;

}

#header {

height: 110px;
background: url(images/header.png);
}


header h1 { //NOT NEEDED
text-align: center;
color: #FFF;

}

header h2 { //NOT NEEDED
font-variant: small-caps;
text-align: center;
color: #fff;
}

.navbar {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background: url(images/navbar.png);
background-size: contain;


}

ul.navbar {
margin-top: 15px;

}

.navbar li {
display: inline;

padding: 0 40px 0 40px;
font-size: 30px;
font-weight: 800;      
}

a:hover, a:visited, a:link, a:active {
text-decoration: none;

background: #60bf19;
 color: #FFF;
text-shadow:
-5px -5px 0 #000;
}

a:hover {
color:dimgrey;
text-shadow:
-5px -5px 0 #000;
}

a:active {
color: #FFF
text-shadow:
-5px -5px 0 #000;
}

.contentbox {
width: 1000px;
position: relative;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
height: 1000px;
}

#maincontent {
color: #FFF;
position: relative;
float: left;
}



#slides{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
right: 0



}

#slides.fade-out {
opacity:0;
}

#slides.fade-in {
opacity:1;
}



.socialcontainer {
width: auto;
height: auto;
 text-align: center;   
}

#facebookbutton {
    background-image: url(images/facebook-hover.png);

height: 48px;
width: 48px;


-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#facebookbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

#twitterbutton {
    background-image: url(images/twitter-hover.png);
height: 48px;
width: 48px;


-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#twitterbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}


#googlebutton {
    background-image: url(images/google-hover.png);
height: 48px;
width: 48px;


-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#googlebutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

<div id="maincontent">
    <div id="content-box">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
    </div>
    <div id="image-box">
        <img name="slides" width="500px" id="slides" src="images/mybike.jpg" />
        <img name="slides" width="500px" id="slides" src="images/racergreen.jpg" />
    </div>
</div>

#content-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;    
}

#image-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}