CSS Stack изображения справа налево, вне DIV

Question

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

скрипка

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

Исходя из вашего описания в комментариях, вы хотели бы следующую структуру:

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

Там, где элементы с номерами 1 видны, а 2 и 3 находятся за пределами экрана, но все еще на линии.

Вы можете достичь этого, располагая элементы в div справа. #present - используя направление текста слева направо (поумолчанию в западных браузерах, но стоит указать, зависит ли ваш макет от этого) и div слева - #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 + "%");