自动定位图像

Question

我在div box里面有很多图像我希望te图像一旦超过bo的高度就会出现在我可以用css做到这一点

<div id="box" style="height:100px">
  <img id="img1" image1.jpg" width="200px" height="200px"></img>
  <img id="img2" image2.jpg" width="200px" height="200px"></img>
      .
      .
      .
</div>

Answer 1

使用flexbox指向列的方向并换行，然后设置高度：

＆＃13;

＆＃13;

#box {
  display: flex;
  height: 700px;
  flex-direction: column;
  flex-wrap: wrap;
}

＆＃13;

<div id="box">
  <img id="img1" src="http://cat-bounce.com/cb.png" width="200px" height="200px"></img>
  <img id="img2" src="http://rs150.pbsrc.com/albums/s85/michelleNpete/BaBas/awesome-beautiful-blue-eyes-cat-cute-Favimcom-110476.jpg~c200" width="200px" height="200px"></img>
  <img id="img3" src="http://rs854.pbsrc.com/albums/ab109/lacilu22/Animals%20II/animashki-9.gif~c200" width="200px" height="200px"></img>
  <img id="img4" src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2013/10/angry-cat-200x200.jpg" width="200px" height="200px"></img>
</div>

＆＃13;

＆＃13;

＆＃13;