1

我正在尝试在 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;
}

任何帮助都会很棒。目前他们正在垂直堆叠到无穷大:(

4

2 回答 2

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/

于 2013-07-10T19:53:45.343 回答
0

正确的。我得到的当前答案是float: right，并根据其中的图像数量使#pastdiv 动态更改宽度。如果有一种非 JavaScript 方式，我会很高兴了解它：D

CSS

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

#past img {
   float: right;
}

jQuery

$('#past').css('width', ( $('#past > img').size() ) * 100 + "%");
于 2013-07-10T07:54:44.700 回答