使无序列表（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插件或沿着这些线可以让你动态定位元素，但我不知道我的头顶。