html - How do I put images next to each other? -


i want make slide show put images won't show next each other.

i have made code, can't figure out how put next each other.

each image same size: 960 x 600

thanks in advance.

html

<div class="container">     <img src="images/logo.png" alt="club penguin item codes" align:"left" class="logo" />   <nav>     <ul class="navigation">         <li><a href="index.html" class="active">home</a></li>         <li><a href="clothing/index.html">clothing items</a></li>         <li><a href="furniture/index.html">furniture items</a></li>         <li><a href="igloos/index.html">igloos</a></li>         <li><a href="stamps/index.html">stamps</a></li>         <li><a href="music/index.html">music</a></li>         <li><a href="chat/index.html">chat</a></li>     </ul>   </nav>     <div class="homepage">        <div id=slider>           <figure>               <img src="images/ss_clothes.png" alt="club penguin clothes" align:"center" />               <img src="images/ss_furniture.png" alt="club penguin furniture" align:"center" />               <img src="images/ss_igloos.png" alt="club penguin igloos" align:"center" />           </figure>        </div>        <div class="checkout">            <h4>also check out penguin lodge , penguin gold more club penguin cheats!</h4>        </div>     </div>  </div> 

css

@keyframes slider { 0% {     left: 0; }  20% {     left: 0; }  25% {     left: -100%; }   45% {     left: -100%; }  50% {     left: -200% }  70% {     left: -200%; }  75% {     left: -300%; }  95% {     left: -300%; }  100% {     left: -400; }  }  #slider {     overflow: hidden; }   #slider figure img {     width: 100%;     float: left;     display: inline; }  #slider figure {     position: relative;     width: 300%     margin: 0;     left: 0;     text-align: left;     font-size: 0;     animation: 20s slider infinite;   } 

you need make images 33% in order put them next each other:

#slider figure img {    width:33%;    float: left; } 

http://codepen.io/anon/pen/vklmxj


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -