Use CSS3 nth-child to alternate the float of images within DIV tags...
- by Aaron Rodgers
Basically, what I'm trying to create is a page of div tags, each has an image inside them and I'm trying to use CSS3's nth-child to alternate the float of that specific image.
But for the life of me, I can't get the nth-child to locate those images. Here is my code so far...
CSS
.featureBlock img:nth-of-type(even) {
float: left;
}
.featureBlock img:nth-of-type(odd) {
float: right;
}
This is the HTML of one of those div tags....
<div class="featureBlock">
<h1>Multisize Players</h1>
<div class="featureHelpBlock"><a href="#">More help with this</a></div>
<img src="http://office2.vzaar.com/images/features/ft_multisize_players.png">
<span class="featureContent"><p>A variety of player sizes is important as we recognise the fact that no two videos or websites are ever the same and you will want something that suits your site’s look. So if you record your video in 4x3 (not widescreen) or 16x9 (widescreen) we have the range of player sizes to suit your exact needs.</p>
<p>We encode the video at the time of uploading in the size that you choose so that the picture and sound quality is retained throughout. Users can choose from the following sizes:</p></span>
<br style="clear:both">
</div>
Hope this makes sense...
