title: display images based on browser width
body: <p>I have bunch of images that I would like to display using jquery. I have divs and I used jquery to populate the divs based on some node_id criteria. For example, if the node_id is teamA, I display images that has teamA text in the name of the images.</p>
  
  <p>It works find, the problem is that when Put the images on the body of the html, images are displayed vertically until there is no space on the main page.</p>
  
  <p>What I would like to do this depending on the size of the browser window, display the images depending on the size of the browser window. For example, if the image size is 500x500 and the browser window width is 700, I should be able to display one image per line. If the width of the browser is 1200, there should be 2 images per line in my browser window.</p>
  
  <p>To give you an idea, I've put html and jquery code to show you what I am doing:</p>
  
  <pre><code>&lt;div class="tab-content" id="tabs1"&gt;
      &lt;div id="team_A" class="team"&gt;&lt;/div&gt;
      &lt;div id="team_B" class="team"&gt;&lt;/div&gt;
      &lt;div id="team_C" class="team"&gt;&lt;/div&gt;
      &lt;div id="team_D" class="team"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the jquery code to display the image based on jstree node_id:</p>
  
  <pre><code>var team_A_Img = "http://test.net" + node_id + "-team_A.png";
              $(function () {
  
                  var myImage = new Image();
                  $(myImage).load(function () {
  
                      $("#team_A").html(myImage);
  
                  }).error(function () {
  
                      $('#team_A').hide();
                  }).attr('src', Img_A_Img)
  
              });
  </code></pre>
  
  <p>This workds but I need to show the images based on the browser window size either vertically or horizonally, based on how much space I have on the browser. Can somebody give me ideas how I would do this?</p>