1

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;
}

どんな助けでも素晴らしいでしょう。現在、それらは無限に垂直に積み重ねられています:(

4

2 に答える 2

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 に答える