Wyrównanie elementów za pomocą przestrzeni stałej (o zmiennej szerokości)

Question

Posiadam pojemnik ze zmienną liczbą elementów. Elementy powinny być uzasadnione, ale z ustalonym odstępem między (np. 20px). Oznacza to, że szerokość każdego elementu musi się dostosować.

Na przykład w ten sposób:

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%; 
} 

Na koniec powinno to wyglądać tak (ten obraz przedstawia dwa przykłady: 2 elementy i 3 elementy, szerokość jest dynamiczna, ale wielkość miejsca [20px]):

Powinien działać z różnej liczbie elementów podrzędnych.

Czy istnieje profesjonalny sposób na zrobienie tego za pomocą CSS?

EDYTOWANIE: Powinienem wspomnieć, że to miejsce naprawy jest wartością%!

Answer 1

przypadku korzystania Flexbox jest opcją, można dodać flex: 1 do flex przedmiotów, a także własności marży o stałej wartości w następujący sposób:

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; } 

Właściwie flex: 1 jest stenogram z flex-grow: 1; w tym przypadku.

Answer 2

Można użyć display: table i display: table-cell na to:

.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>