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/
Thanks
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.