CSS Укладывайте изображения справа налево, из DIV

Question

Я пытаюсь достичь картины будущего и будущего в 2 div. Все изображения с левой стороны экрана стека до бесконечности справа налево, а все изображения с правой стороны стека экрана до бесконечности слева направо. Я почти достиг этого, но я не могу остановить образы, идущие на новую строку.

Fiddle

HTML

<div id="parent1"> 
    <div id="past"> 
     <img id="topic1" src="./img/topic1.png"></img> 
     <img id="topic2" src="./img/topic2.png"></img> 
     ... 

    </div> 
    <div id="future"> 
     <img id="topic1a" src="./img/topic1a.png"></img> 
     <img id="topic2b" src="./img/topic2b.png"></img> 
     ... 

    </div> 
</div> 

CSS

#parent { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0%; 
    left: 0% 
} 

#future { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:50%; 
    top:0% 
} 

#future img { 
    float: left; 
    height: auto; 
    width: auto; 
    margin: 1%; 
    max-height: 100%; 
    white-space: nowrap; 
} 

#past { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:0%; 
    top:0% 
} 

#past img { 
    float: right; 
    height: auto; 
    width: auto; 
    margin: 1%; 
    max-height: 100%; 
    white-space: nowrap; 
} 

Любая помощь будет большим. В настоящее время они укладываются вертикально в бесконечность :(

Answer 1

Основываясь на вашем убыв ription в комментариях, вы хотели бы следующую структуру:

3 - 2 - [ 1 | 1 ] - 2 - 3 

Где элементы пронумерованы 1 видимы и 2 & 3 находятся вне экрана, но по-прежнему рядный.

Вы могли бы добиться этого, имея элементы в DIV справа - #present - используя направление текста слева направо (по умолчанию в западных браузерах, но стоит указать, если ваш макет зависит от него) и DIV на left - #future - используя текстовое направление справа налево. Вы можете скрыть переполняющие элементы, используя overflow: hidden внутри родительского элемента:

CSS

img { 
    height: 100%; 
    width: 100%; 
} 

#past, #future { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:0%; 
    top:0%; 
    overflow: hidden; 
    white-space: nowrap; 
} 

#past { 
    left:50%; 
    text-align: left; 
    direction: ltr; 
} 

#future { 
    text-align: right; 
    direction: rtl; 
} 

HTML

<div id="past"> 
    <img id="topic1" src="/path/to/image1.jpg"></img> 
    <img id="topic2" src="/path/to/image2.jpg"></img> 
    <img id="topic3" src="/path/to/image3.jpg"></img> 
</div> 
<div id="future"> 
    <img id="topic1a" src="/path/to/image4.jpg"></img> 
    <img id="topic2b" src="/path/to/image5.jpg"></img> 
</div> 

Рабочий пример: http://jsfiddle.net/vymvN/

Answer 2

Правильно. Текущий ответ, который у меня есть, - float: right, и сделайте так, чтобы #past div динамически меняли ширину, исходя из того, сколько изображений в ней. не путь JavaScript Я бы довольный, чтобы узнать об этом: D

CSS

#past { 
    right: 50%; 
    width: 300%; 
} 

#past img { 
    float: right; 
} 

JQuery

$('#past').css('width', ($('#past > img').size()) * 100 + "%");