位置決め画像は自動的に

Question

私はdiv box内の画像がたくさんある私は、すぐにそれがBOの高さを超えると側に来て、TEの画像をご希望の私は、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>