使無序列表（UL）彼此相鄰並將它們堆疊在彼此的底部，無邊距或空格

Question

我有多個無序列表（UL）元素。請檢查下面的圖片：

我想要做的是漂浮UL彼此相鄰。 UL有不同長度的內容（LIs），因此有些UL比其他UL長。當我在有限寬度div層中將UL相互浮動時，最後一個UL浮點在底部/左側。但是，如果UL的時間更長，則會有一些空間。我希望UL在每個UL元素的底部向左浮動並且與堆棧相互無間隔。有沒有辦法用HTML/CSS來實現這一點？

浮動的UL留給對方很容易...但我不知道如何擺脫利潤率

----- UPDATE的----

這是代碼我用來生成HTML ...實際上我將它從UL改爲TABLE，但它不會改變我的問題。我有許多表可能從1到8不等。這些表將出現的容器DIV的寬度可以容納最多4列。 TABLE將有不同數量的ROW，因此長度會有所不同。

$groups = array(); 
foreach ($related->posts as $post) { 
    $groups[$post->post_type][] = $post; 
} 
foreach ($groups as $name => $posts) { 
    printf('<table class="related-group related-%s "><tbody>', htmlspecialchars($name)); 
    foreach ($posts as $post) { 
     printf('<tr class="related-item"><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></td><td><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></td></tr>'); 
    } 
echo '</tbody></table>'; 
} 

Answer 1

雖然給出的意見和建議，確實是有幫助的，

我解決了這個問題與jQuery砌體，一個jQuery插件

http://masonry.desandro.com/

我不知道是否有更好的方法來做到這一點，但這只是工作

同位素，另一個看起來類似於砌體的jQuery插件，可能可以做磚砌相同的工作，但我還沒有測試：http://isotope.metafizzy.co/

感謝閱讀和下降

Answer 2

這將是可能的，如果你垂直堆疊他們。這jsfiddle here說明你的問題，下一行的項目將開始在最前面的ul到達前一行的地方。不要爲新行創建新列，您可以將ul的背部插入原始列以垂直堆疊ul。看看this jsfiddle看到的差異。

對不起，不知道您是否可以訪問這些鏈接。 jsfiddle.net現在似乎正承受着沉重的負擔。

Answer 3

那麼，這種解決方案可能沒有具體回答你的問題，但它可以幫助您解決您的問題：

你將不能夠做到使用漂浮在你提出的這個方法。我能想到的唯一解決方案是將元素劃分爲DIV s（或您選擇的塊元素），這些元素是左側浮動的。從本質上講，你把屬於在相同的Y軸置於某種類型的列元素每個UL：

<div class="col"> 
    <ul><!-- LI elements here --></ul> 
    <ul><!-- LI elements here --></ul> 
</div> 

<div class="col"> 
    <ul><!-- LI elements here --></ul> 
    <ul><!-- LI elements here --></ul> 
</div> 

<div class="col"> 
    <ul><!-- LI elements here --></ul> 
</div> 

<div class="col"> 
    <ul><!-- LI elements here --></ul> 
</div> 

我知道這是因爲你要添加的元素是不能完全語義純粹爲表象的目的，但是我不除非你能夠使用絕對/相對定位 - 如果知道每個列表中的項目數量，這可能是可行的）。

另外，有可能是一個jQuery插件或沿着這些線可以讓你動態定位元素，但我不知道我的頭頂。