html - CSS水平滚动技巧

Question

这是我的内容:

<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，因为它会增加加载时间。

请指教

Edit: http://jsfiddle.net/8of8j0d9/ Just for reference

Answer 1

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