Question

只是尝试将一些文本与右侧的图像对齐，图像使用javascript在两个图像之间转换。我需要保留过渡效果，但也可以在同一容器中将文本换行到左侧。有人可以帮忙吗？

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);
}

Answer 1

假设我明白你要做什么..

您可以将文本和图像分别放在#maincontent元素内的单独div标签中，然后将它们与自己的css并排对齐。从技术上讲，它们不像您所说的那样在SAME容器中，但它们仍然在#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;
}

脚本图像不会包含文本

1 个答案: