使浮動元素佔用空間

Question

這可能以前曾被問到過，但我無法找到正確的搜索條件。

我有一大堆浮動元素，它們看起來有點像這樣：

（CodePen）

這是令人滿意的。不幸的是，我有一個新的要求，這意味着用戶可以動態更改各個元素的高度。

（CodePen）

正如你所看到的，這些元素開始高大元素的右邊堆放，最終溢出並留下左邊一個空隙之前。

（CodePen）

這比浮動元素更好，但仍然有很多未使用的空間。此外，我必須小心避免在這些內聯元素之間的DOM中使用空格，以避免添加額外的空格。這非常煩人。

我希望它看起來更像是這個有點：

我寧願一個純CSS的解決方案，但我願意使用JavaScript，如果我不得不這樣做。

下面的代碼產生在這篇文章中，情況CodePen是不可訪問的第二圖像：

HTML：

<div class="container"> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated height"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
    <div class="floated"> 
    </div> 
</div> 

CSS：

.container { 
    width: 1200px; 
} 

.floated { 
    float: left; 
    box-sizing: border-box; 
    padding: 10px; 
    height: 50px; 
    margin: 10px; 
    width: 200px; 
} 

.floated::after { 
    content: ' '; 
    display: block; 
    height: 100%; 
    width: 100%; 
    background: red; 
} 

.height { 
    height: 150px; 
} 

Answer 1

這裏有一個與最接近的codepen我可以得到一個純粹的CSS解決方案，它確實涉及更改標記，但將其保留爲一行格式：

http://codepen.io/stufu/pen/qdpvqw

CSS

.container { 
    width: 1200px; 
} 
.float-row { position:relative; padding:20px 0; } 
.float-row:after { content:''; display:block; clear:both; height:1px; width:1px; } 

.floated { 
    position:absolute; 
    display: block; 
    box-sizing: border-box; 
    padding: 10px; 
    top:auto; 
    height: 50px; 
    margin: 10px; 
    width: 200px; 
} 

.floated.col1{ 
    left:0; 
} 
.floated.col2{ 
    left:200px; 
} 
.floated.col3{ 
    left:400px; 
} 
.floated.col4{ 
    left:600px; 
} 
.floated.col5{ 
    left:800px; 
} 

.floated.push { top:120px; } 

.floated::after { 
    content: ' '; 
    display: block; 
    height: 100%; 
    width: 100%; 
    background: red; 
} 

.height { 
    height: 150px; 
} 

HTML

<div class="container"> 
    <div class="float-row"> 
    <div class="floated col1"></div> 
    <div class="floated col2"></div> 
    <div class="floated col3"></div> 
    <div class="floated col4"></div> 
    <div class="floated col5"></div> 
    </div> 
    <div class="float-row"> 
    <div class="floated col1"></div> 
    <div class="floated col2"></div> 
    <div class="floated height col3"></div> 
    <div class="floated col4"></div> 
    <div class="floated col5"></div> 
    </div> 
    <div class="float-row"> 
    <div class="floated col1"></div> 
    <div class="floated col2"></div> 
    <div class="floated push col3"></div> 
    <div class="floated col4"></div> 
    <div class="floated col5"></div> 
    </div> 
</div> 

這是不是一個偉大的方式，但因爲任何時候高度增加，你必須考慮到它與推DIV類下來（也許讓其他人拉它）。更不用說如果高度是根據動態內容而變化的話，這幾乎是不可能維持的。

另外，我會說，如果關注的是保持這種閱讀的從左到右的格式..一旦列增加的大小，是不是窗外的想法？該列中的小行被推下，現在最後讀取，或者您將其拉到左側，現在出現故障。

我認爲這需要受到限制，難以維護，或者您沿着isotope path這可能有點極端。