jake123 jake123 - 7 months ago 27
Javascript Question

positioning images automatically

I have a lot of images inside the

div box
i would like te images to come to the side as soon as it exceeds the height of the bo can i do this using 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>


enter image description here

Answer

Use flexbox with direction of column and wrap, and set the height:

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

Comments