CSS 从右到左堆叠图像，脱离 DIV答案

【问题标题】：CSS Stack images from right to left, out of the DIVCSS 从右到左堆叠图像，脱离 DIV
【发布时间】：2013-07-07 04:18:03
【问题描述】：

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

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

【问题讨论】：

除非我使用了 nowrap。还是没有解决问题
你能添加一个JSFiddle 来展示你的代码吗？当图像显示为内联块时，您可能会摆脱浮动，所以我认为不需要它们
jsfiddle.net/XHacq 第一次小提琴，很有趣
摆脱浮动确实将它们并排放置，但我希望左侧堆栈在左侧，右侧堆栈在右侧
我在你的 jfiddle 中学到的东西比我从我读过的所有网站中学到的更多：p 现在需要重新编写我所有的 css

标签： css image css-float whitespace nowrap

【解决方案1】：

根据您在 cmets 中的描述，您需要以下结构：

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/

【讨论】：

我以前从未见过方向：rtl。不过那完美。非常感谢。你认为你可以删除顶部的“这个问题可能已经在这里有了答案”吗？我觉得这个问题以前没有人回答过。顺便恭喜你获得了 10.3 k 代表。这真是令人印象深刻

【解决方案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 + "%");

【讨论】：