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/ Просто для справки

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

Я думаю, что сценарий вы описываете может быть хорошо inplemented с flexboxes, для справки смотреть на this,

это, как я бы интегрировать его:

.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;}

<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>