备用柱位置（左右）

Question

我在WordPress网站上有一个帖子列表，其中包含摘录和图像。每列都在一列中。一个漂浮在左边，一个漂浮在右边。

我想要实现的是交替每个帖子，使第一个具有左对齐图像和右对齐文本;然后第二个具有右对齐图像和左对齐文本，然后是下一个左对齐图像，右对齐文本。 也许有PhP或JS / Jquery这样做的方式？

*请参阅图片，以便了解我的意思。

这里还有一个基本的HTML / CSS JSFiddle：jsfiddle.net/huwrowlands/7WGTm /

由于

Answer 1

现在尝试这个

用于父类div 中css 定义中的伪类 :nth-child(even)

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

}

<强> Demo

有关 nth-child

的更多信息

Answer 2

CSS3 Pseudo（奇数，偶数）

使用新的伪类:nth-child(odd)或:nth-child(even)非常容易。

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

<强>演示

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