使用固定空間對齊元素（可變寬度）

Question

我有一個容器，其中包含可變數量的元素。 這些元素應該是合理的，但是有一個固定的空間（例如20px）。 這意味着每個元素的寬度必須適應。

例如這樣的：

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

在結束它應該是這樣的（本圖顯示了兩個例子：2層的元件和3個元素;寬度是動態的，但空間修復[20px]）：

應該有不同數量的子元素的工作。

有沒有專業的方式來做到這一點與CSS？

編輯：我應該提到這個修復空間是一個％值！

Answer 1

如果使用Flexbox是一個選項，你可以添加flex: 1到Flex項目，也是margin屬性有一個固定的值，如下所示：

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

其實flex: 1是在這種情況下，flex-grow: 1;的簡寫。

Answer 2

您可以使用display: table和display: table-cell此：

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