title: Same position and animation of dynamic generated Images
body: <p>I have a few elements positioned in my HTML. The body has a max-width from 1280px with margin auto. And there are a few elements, which I floated right. In the middle of the page there should be 70 images go from left to right (and then dissapear). I have tried to make those elements position absolute with display: inline, but since the start and the end position should always be the same, and the images have a width and a height, I didn't know how to make it dynamically.. Thats my code so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Sweets&lt;/h1&gt;
      &lt;div class="images"&gt;&lt;/div&gt;
      &lt;div id="display"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div id="maracons"&gt;&lt;/div&gt;
      &lt;div id="cupCake"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>  for (var i = 0; i &lt; 10; i++) {
      $('.images').append('&lt;img class="image' + i.toString() + '" src="img/' + arr[i][5] + '"&gt;');
    }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>$leftPos: 1100px;
  $widthImage: 200px;
  
  .images{
      width: $widthProducts;
      height: 200px;
      position: absolute;
      left: 1100px;
      top: 0px;
  }
  
  .image-1{
      left: $leftPos;
  }
  
  .image-2{
      left: $leftPos - $widthImage;
  }
  
  .image-3{
      left: $leftPos - $widthImage*2;
  }
  </code></pre>
  
  <p>Here is how it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/BDJPR.jpg" alt="Position of my Elements"></p>