title: How to display images inline
body: <p>I have a navigation div with three images. Each image has a title element absolutely positioned at the bottom of the picture. I am trying to display all three of the images adjacent to each other on the same line but the pictures are displayed as blocks.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class = "nav"&gt;
      &lt;div class = "container"&gt;
  
          &lt;div class = "image"&gt;
              &lt;img src = "img1"&gt; 
          &lt;/div&gt;
          &lt;div class = "title"&gt;
              &lt;p&gt; text1 &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
       &lt;div class = "container"&gt;
  
          &lt;div class = "image"&gt;
              &lt;img src = "img2"&gt; 
          &lt;/div&gt;
          &lt;div class = "title"&gt;
              &lt;p&gt; text2 &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
       &lt;div class = "container"&gt;
  
          &lt;div class = "image"&gt;
              &lt;img src = "img3"&gt; 
          &lt;/div&gt;
          &lt;div class = "title"&gt;
              &lt;p&gt; text3 &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.nav {
      display: inline;
  }
  
  .container {
      position: relative;
      width: 100%;
  }
  
  .image img {
      width: 30%;
      height: 4.5in;
  }
  
  .title {
      width: 30%;
      position: absolute;
      bottom: 0; left: 0;
  }
  </code></pre>