CSS чередование свойств однотипных div

Каждый раз хочется что-то новенького и необычного в оформлении привычных для глаза материала веб-сайта. И сегодня, мне вдруг приспичило хоть как-то улучшить банальный вывод ленты постов.
Поставлена цель: в однотипной верстке, средствами CSS добиться чередования в шахматном порядке миниатюры и заголовка с анонсом статьи.
Исходные данные:
<div class="lenta1">
    <div class="im">image</div>
    <div class="text">text</div>
    <div class="clear"></div>
</div>

Такой вывод нам удобен, тем что мы можем легко интегрировать в любую CMS, на базе которой основан блог.
Решение:
.clear{
    clear: both;
    display: table;
    height: 0;
    width: 100%;
}
.lenta1 {
    margin-bottom: 10px;
}
.im {
    width: 20%;
    background: yellow;
}
.text {
    width: 80%;
    background: green;
}
.lenta1:nth-child(2n) .im,
.lenta1:nth-child(2n) .text {
    float: left;
}
.lenta1:nth-child(2n+1) .im,
.lenta1:nth-child(2n+1) .text {
    float: right;
}

Визуально, можно посмотреть тут: http://jsfiddle.net/...
30 августа 2014, 18:31