Giustificare elementi con spazio fisso (larghezza variabile)

Question

Ho un contenitore con un numero variabile di elementi. Gli elementi devono essere giustificati ma con uno spazio fisso tra (ad esempio 20px). Ciò significa che la larghezza di ogni elemento deve adattarsi.

Per esempio, questo:

HTML

<div class="container"> 
    <div> 
     <img src="..."> 
    </div> 
    <div> 
     <img src="..."> 
    </div> 
    <div> 
     <img src="..."> 
    </div> 
</div> 

CSS

div.container { 
    text-align: justify; 
} 

div.container div { 
    display: inline-block; 
    margin-right: 20px; 
} 

div.container div img { 
    width: 100%; 
} 

Alla fine dovrebbe assomigliare a questo (Questa immagine mostra due esempi: 2 elementi e 3 elementi: la larghezza è dinamica ma la correzione dello spazio [20px]):

Dovrebbe funzionare con un diverso numero di elementi figlio.

Esiste un modo professionale per farlo con i CSS?

EDIT: Devo dire che questo spazio di correzione è un valore%!

Answer 1

Se si utilizza Flexbox è un'opzione, si potrebbe aggiungere flex: 1 alle voci di Flex e anche una proprietà del margine con un valore fisso come segue:

EXAMPLE HERE

div.container { display: flex; } 

div.container div { 
    height: 50px; /* Just for demo */ 
    flex: 1; 
    margin-left: 20px; 
} 

div.container :first-child { margin-left: 0; } 

In realtà, flex: 1 è un stenografia di flex-grow: 1; in questo caso.

Answer 2

È possibile utilizzare display: table e display: table-cell per questo:

.container { 
 
    display: table; 
 
    width: 100%; 
 
    border-spacing: 10px 0; 
 
    border-collapse: separate; 
 
    background: palevioletred; 
 
} 
 
.container div { 
 
    display: table-cell; 
 
} 
 
.container img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div><img src="//dummyimage.com/200x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/300x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/400x100/000/CCC"></div> 
 
</div> 
 
<hr/> 
 
<div class="container"> 
 
    <div><img src="//dummyimage.com/200x100/000/CCC"></div> 
 
    <div><img src="//dummyimage.com/400x100/000/CCC"></div> 
 
</div> 
 
<hr/> 
 
<div class="container"> 
 
    <div><img src="//dummyimage.com/600x100/000/CCC"></div> 
 
</div>