If you put up a lot of images on your web pages, you may want to alternate how they are displayed within the content. With CSS 2 and below, you have to set a different class on every image. Then you add the float:left or float:right to each class. If you add a new image to the page and you want it to alternate with the rest, you’ll need to add a class to it and then change the class of all the images below it.
CSS 3 makes this easy. With just two CSS styles you can set all the images on your page to float alternately left and right. You just need to use the nth-of-type CSS pseudo-class.
Write Your HTML
First write your HTML with the images in the content where you want them.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <img src="http://css3c.com/wp-content/themes/blue-chronicles/images/logo.gif" alt="Css3c.com Floated Images" width="100" height="100" /> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <img src="http://css3c.com/wp-content/uploads/2011/06/css-button.gif" alt="Css3c.com Floated Images" width="100" height="100" /> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <img src="http://www.css3.info/wp-content/uploads/2011/05/stunningCSS3-paul-irish1.gif" alt="Css3c.com Floated Images" width="100" height="100" /> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" /> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <img src="http://css3c.com/wp-content/uploads/2010/12/CSS3FWD.jpg" alt="Css3c.com Floated Images" width="100" height="100" /> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> <p>testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 testing 123 </p> |
1 2 3 4 5 6 | img:nth-of-type(odd) { float: left; } img:nth-of-type(even) { float: right; } |