jovenne jovenne - 4 months ago 9
HTML Question

Alternate display of posts on my website

I have a blog/website something like this and I'm trying to make each post display in alternate order. The image of the first post displays on the right and the second post image displays on the left...

<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="section">
<article>
<a href="#"><img src="/img/picture1.jpg" width="100" height="100" /></a>
<h2>Post Title 1</h2>
<p>post contents post contents</p>
</article>

<article>
<a href="#"><img src="/img/picture2.jpg" width="100" height="100" /></a>
<h2>Post Title 2</h2>
<p>post contents post contents</p>
</article>

<article>
<a href="#"><img src="/img/picture3.jpg" width="100" height="100" /></a>
<h2>Post Title 3</h2>
<p>post contents post contents</p>
</article>

<article>
<a href="#"><img src="/img/picture4.jpg" width="100" height="100" /></a>
<h2>Post Title 4</h2>
<p>post contents post contents</p>
</article>
</div> <!-- /.section -->

</body>
</html>


I'm aware about the CSS nth-child and nth-of-type selectors but still newbie on how to properly use it.

I have this sample CSS code that I modeled from the answer here: Problem with odd/even child elements in nth-child but I can't make it properly style the tags inside the article element.

div.section article img:nth-of-type(odd) {
float: right;
}

div.section article img:nth-of-type(even) {
float: left;
}


I searched for some model design and I found this which is something similar to my site.

enter image description here

Any help is very much appreciated.

Answer

Attach nth of type to the article

div.section article:nth-of-type(odd) img {
    float: right;
}

div.section article:nth-of-type(even) img {
    float: left;
}