只是试图将一些文本与右侧的图像对齐，该图像使用 javascript 在 2 个图像之间进行转换。我需要保留过渡效果，但也需要在同一个容器中将文本换行到它的左侧。有人可以帮忙吗？
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<nav>
<ul class="navbar">
<li><a href="bikes.html">BIKES</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="join.html">JOIN</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="contentbox">
<div id="maincontent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
<img name = "slides" id="slides" src="images/mybike.jpg"/>
<img name = "slides" id ="slides" src="images/racergreen.jpg"/>
<script> //adapted from https://www.youtube.com/watch?v=e1AYSgA57h8
var interval = 4 * 20; // seconds between change
var images = document.getElementsByName("slides");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</div>
</div>
<br>
<div>
<div class="socialcontainer">
<a href="facebooklink"><img id="facebookbutton"/></a>
<a href="twitterlink"><img id="twitterbutton"/></a>
<a href="googlelink"><img id="googlebutton"/></a>
</div>
</div>
</body>
CSS
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 标签内的 #maincontent 元素内，然后将它们与它们自己的 css 并排对齐。从技术上讲，它们并不像您所说的那样位于同一容器内，但它们仍然位于#maincontent 容器内。
这是我的 JSFiddle希望能有所帮助。请注意，为了淡入淡出效果，我用随机图像代替了您的图像。
<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>
添加的CSS:
#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;
}
关于javascript - 脚本图像不会用文本换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29292330/