如何根據子元素的寬度高效地分配列寬？

Question

我已經給出了一個設計來創建HTML/CSS，我認爲這可能是不可能的，但我想在我承認失敗之前絕對確定並採取妥協。

許多含有可變長度的文本項被佈置成多組的兩個這樣使得它們形成在列在可用寬度分佈準確列，但確保每列是不超過它的最寬的項目更寬。因此它儘可能高效地使用水平空間，同時仍然確保項目完美對齊作爲網格。考慮這個例子 -

[-a--] [-cccccc-] [-eee-] [-g---] 
[-bb-] [-dddd---] [-ff--] [-hhh-] 

也許這看起來扁平，但考慮到該項目還必須包裹當容器縮小，仍列保持自己的神​​奇對準 -

[-a---] [-cccccc-] 
[-bb--] [-dddd---] 
[-eee-] [-g------] 
[-ff--] [-hhh----] 

我不能工作了解如何解決寬度的遞歸依賴關係。也就是說，每個「列」的寬度由該列中最長的項目定義，但總可用寬度是已知的，並且必須是列寬度的精確總和。

我很高興能夠使用僅適用於CSS3的解決方案，迴歸到舊版瀏覽器的固定項目寬度解決方案，但我完全難以理解哪些CSS屬性可以實現這種魔力。

只是爲了提供某種形式的起點，這裏有一個Codepen使用CSS3列：http://codepen.io/anon/pen/kiGgp

這已經不是什麼好列均勻分佈的，我想知道是否有一種方法來分配這些最佳替代。

Answer 1

即使在使用FlexBox模型進行多次嘗試之後，我仍無法實現您指定的內容。 （順便說一下：目前這款機型在瀏覽器上支持不力）

但是，在我的努力中，我帶來了一個體面的解決方案，也許你也會喜歡它。

Demo in this Fiddle

我已經管理到每一行均勻分佈的元素之間的空間，同時允許元素包裝。 每個元素都可以獲得他需要的確切空間量，其餘的空間分爲行。

但是，即使在元素換行時，此寬度仍然保持不變。所以你沒有'像列'顯示。

這是純粹的CSS，並且跨瀏覽器。 測試上： IE10，IE9，IE8，Chrome瀏覽器，FF

HTML

<div class="wrap"> 
    <div class="pair"> 
     <p>a</p> 
     <p>b</p> 
    </div> 
    <div class="pair"> 
     <p>cccccccc</p> 
     <p>dddddd</p> 
    </div> 
    <div class="pair"> 
     <p>ee</p> 
     <p>f</p> 
    </div> 
    <div class="pair"> 
     <p>ggggggggggg</p> 
     <p>hhhhhhhhh</p> 
    </div> 
    <div class="pair"> 
     <p>iiii</p> 
     <p>jjjjjj</p> 
    </div> 
    <div class="filler"></div> 
</div> 

CSS

* 
{ 
    padding: 0; 
    margin: 0; 
} 
.wrap 
{ 
    background-color: #ccc; 
    line-height: 0; 
    text-align: justify; 
} 

.pair 
{ 
    line-height: normal; 
    background-color: #ddd; 
    display: inline-block; 
    width: auto; 
} 

.filler 
{ 
    width: 100%; 
    height: 0; 
    font-size: 0; 
    display: inline-block; 
    vertical-align: top; 
}