html - CSS水平滚动技巧

所以这是我的内容：

<div class="items_viewed" id="block1">
    <div class="item_wrapped">
        <div id="item1" class="item">item 1</div>
        <div id="item2" class="item"></div>
        <div id="item3" class="item"></div>
        <div id="item4" class="item"></div>
        <div id="item5" class="item">item 5</div>
    </div>
</div>
<div class="clear"></div>
<div class="items_viewed" id="block2">
    <div class="item_wrapped">
        <div id="item1" class="item">item 1</div>
        <div id="item2" class="item"></div>
        <div id="item3" class="item"></div>
        <div id="item4" class="item"></div>
        <div id="item5" class="item">item 5</div>
    </div>
</div>

CSS非常简单：

.items_viewed {
    width:100%;
    height:410px;
    overflow:auto;
}
.item_wrapped {
    width:990px;
}
.item {
    height:380px;
    width:148px;
    background:#CCCCCC;
    float:left;
    margin:4px;
}

我需要第一个block1以item1作为第一个可见项，并且block2要显示item5作为第一个可见项。

因此，当用户滚动页面时，他从右向左滑动block1，从左向右滑动block2。

direction:ltr似乎没有帮助。而且我不想使用Javascript，因为它会增加加载时间。

请指教


  编辑：
  http://jsfiddle.net/8of8j0d9/仅供参考

最佳答案

如果您不想使用javascript，并且需要更改页面中的顺序或标签，我想您应该更改HTML代码，或者用PHP输出它，以便能够按需重新排列标签？