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

请告知

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

Answer 1

如果您不想使用javascript，并且需要更改页面中的订单或标签，我猜您应该更改HTML代码，或者可以使用PHP输出以便能够重新订购标签你喜欢吗？

Answer 2

你需要以相反的顺序渲染它们或者用css玩一点，比如：

<div class="items_viewed" id="block2">
    <div class="item_wrapped right">

.item_wrapped.right div { float: right; }

Answer 3

我认为您正在描述的方案可以很好地补充 flexboxes 如需参考，请查看this，

这就是我整合它的方式：

＆＃13;

.items_viewed{height:410px; overflow-y:auto; }
.item_wrapped{display:flex; width:500%;}
#block1{overflow-x: scroll;direction:ltr;flex-direction:row-reverse;}
#block2{overflow-x: scroll;direction:rtl;flex-direction:row-reverse;}
.item{height:380px; width:100%; background:#CCCCCC; float:left; margin:4px;}

＆＃13;

<div class="items_viewed" id="block1">
    <div class="item_wrapped top">
        <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 bottom">
        <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>

＆＃13;

CSS水平滚动技巧

3 个答案: