Question

我试图在2个div中实现过去和未来的画面线。屏幕左侧的所有图片从右到左堆叠到无限远，屏幕右侧的所有图像从左到右堆叠到无限远。我几乎已经实现了这个目标，除非我不能阻止图像进入新线。

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＆amp; 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 + "%");

CSS在DIV之外从右到左堆叠图像

2 个答案: