title: Having 4 images in each row in a div
body: <p>I want to have 4 images in each row of my content <code>div</code> <br/>
  After I insert the first four images, they will be shown in the row one. If I add more images the will go to the next row until it reaches four numbers, then it will go to the next row and so on.
  I want it to be styled in a way that whenever I try make the browser window smaller, the images would go below each other to make a balanced number of pictures to be shown in each row.</p>
  
  <pre><code>&lt;div id="content"&gt;
     &lt;img src="pic1.jpg" alt="pic1"&gt;
     &lt;img src="pic1.jpg" alt="pic1"&gt;
     &lt;img src="pic1.jpg" alt="pic1"&gt;
     &lt;img src="pic1.jpg" alt="pic1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried the above code and gave some styles to the <code>content</code> div. But I failed to get the desired result.</p>