title: How to make equal space between boxes in one row via CSS
body: <p>I have a requirement that there are 4 boxes in one row.</p>
  
  <ol>
  <li>the boxes have fixed width and height</li>
  <li>but the width of the row will change by screen size.</li>
  <li>the first box should be aligned to the left border of the row</li>
  <li>last box aligned to right border.</li>
  <li>Also the space between any two boxes should be equal.</li>
  </ol>
  
  <p>Is there a pure CSS way to make that happen? Here is the <a href="http://jsfiddle.net/chennanfei/NUsZY/1/" rel="nofollow"><code>jsfiddle code</code></a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class ="col"&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class ="col"&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class ="col"&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class ="col"&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.row {
      display: table;
      border: 1px solid green;
      width: 400px; /* it changes by screen size actually */
      padding: 5px;
  }
  .row:before, .row:after {
      content: "";
  }
  .row:after {
      clear: both;
  }
  .col {
      float: left;
      width: 25%;
  }
  .box {
      border: 1px solid #DDD;
      width: 80px;
      height: 80px;
      margin: 0 auto;
  }
  .col:first-child .box {
      margin-left: 0;
  }
  .col:last-child .box {
      margin-right: 0;
  }
  </code></pre>