CODEWITHSUNDEEP
javascriptphpcsshtml
Huw Rowlands
Huw Rowlands

Reputation: 591

Alternate Column Position (Left & Right)

I have a list of post on a WordPress website that has an excerpt and an image. Each on in a column. One floated left, one floated right.

What I want to achieve is to alternate each post so that the first has a left aligned image, and right aligned text; then the second has a right aligned image and left aligned text, and then the next, left aligned image, right aligned text. Perhaps there is a PhP or JS/Jquery way of doing this?

*Please see image so you can see what I mean.

There is also a basic HTML/CSS JSFiddle here: jsfiddle.net/huwrowlands/7WGTm/

enter image description here

Thanks

Upvotes: 0

Views: 823

Answers (2)

cocco
cocco

Reputation: 16706

CSS3 Pseudo (odd,even)

Using the new pseudo class :nth-child(odd) or :nth-child(even) it's very easy.

.hp-module {
 width: 100%;
}
.col{
 width: 46%;
 padding: 2%;
 float: right;
 text-align: center;
}
.hp-module:nth-child(odd)>div{
 float:left;
}

Demo

http://jsfiddle.net/7WGTm/3/

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Now try to this

Used to pseudo-classes :nth-child(even) in your css define this in parents div as like this 

.hp-module:nth-child(even) > .col:first-child{
    float:right;

}

Demo

more about nth-child

Upvotes: 3

Related Questions