CODEWITHSUNDEEP
htmlcss
joe.dev
joe.dev

Reputation: 115

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.

Upvotes: 0

Views: 69

Answers (2)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

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

Upvotes: 1

ahe
ahe

Reputation: 21

Do you want like this sample ? https://jsfiddle.net/ahe128/k4gvdqhg/

style code

   .section{width:300px;}
div.section article:nth-of-type(odd) img {
    float: left;
}

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

#w_odd {
    float: left;
}

#w_even {
    float: right; 
}

and the html 

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

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

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

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

Upvotes: 0

Related Questions