Выравнивание изображений в DIV

Question

Я пытаюсь выровнять три изображения в классе div в прямую горизонтальную линию.

<div class="topimages"> 
    <img src="code/images/image_personallogo.png" alt="personallogo"> 

    <img src="code/images/image_propercorn.png" alt="propercorn"> 

    <img src="code/images/image_christmas.png" alt="christmascard"> 
    </div><!--top images--> 

и CSS до сих пор

.topimages { 
    display: table; 
    width: 1024px; 
    margin: 40px auto; 
} 



.topimages img { 
    width:319px; 
    height:319px; 
} 

Таким образом, проблема заключается в том, что изображения почти идеально выровнены исключением того, что существует другое пространство между вторым и третьим изображением, чем между первым и вторым изображением. Это то, о чем я говорю: http://postimg.org/image/y00x4nvtr/

Кто-нибудь знает, для чего это и как я могу это исправить? Спасибо.

Answer 1

Самого ценный способ заключается в использовании таблицу с одной тром:

HTML:

<table id="myImages"> 
    <tr> 
     <td> 
      <img src="code/images/image_christmas.png" alt="christmascard" /> 
     </td> 
     <td> 
      <img src="code/images/image_propercorn.png" alt="propercorn" /> 
     </td> 
     <td> 
      <img src="code/images/image_christmas.png" alt="christmascard" /> 
     </td> 
    </tr> 
</table> 

Для изменения границы в таблице, вы должны использовать границу коллапса и пограничный интервал

CSS:

#myImages { 
    border: 1px solid silver; 
    padding: 50px; 
    margin: 0px auto; 

    border-collapse: separate; 
    border-spacing: 20px; 
} 

#myImages img { 
    width: 320px; 
    height: 320px; 
} 

В таблице или (дисплей: стол) нет необходимости устанавливать всю ширину, чтобы использовать запас: 0 авто к центру элемента. Ширина определяется шириной элементов внутри. И от прокладок и полей.

https://jsfiddle.net/ka827L97/