jquery - 自动定位图像

Question

我在 div box 中有很多图像，我希望这些图像在超过 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列方向和换行，并设置高度:

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

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