浮动无序列表（UL），彼此相邻，并将它们堆叠在彼此的底部，没有边距或空格 [英] Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces
问题描述
我有多个无序列表（UL）元素。请检查下面的图片：
I have multiple unordered lists (UL) elements. Please check the image below:
我想做的是将UL彼此相邻。 UL具有不同的内容长度（LI），因此一些UL比其他UL更长。当我在有限宽度的div层中彼此相邻地浮动UL时，在某一点处，最后的UL浮动在底部/左边。然而...如果有一个更长的UL会有一些空间。我希望UL在每个UL元素的底部，没有空格，向左浮动和到堆栈。有没有办法用HTML / CSS来实现这一点？
what I want to do is float the ULs next to each other. The ULs have different lenghts of content (LIs), therefore some UL are longer than other. When I float ULs next to each other in a limited width div layer, at some point the last ULs float at the bottom / left. However... if there's a UL that is longer there will be some space. I wish the ULs to float left and to stack to each other, at the bottom of each UL element, without spaces. Is there a way to achieve this with HTML/CSS?
浮动ULs彼此之间很容易...但我不知道如何摆脱保证金
floating ULs left of each other is easy... but I don't know how to get rid of the margin
----- UPDATE ----
----- UPDATE ----
这是我用来生成HTML ...实际上我把它从ULs改为TABLEs，但它不改变我的问题。我有一些TABLE可以从1到8.这些表将出现的容器DIV的宽度可以托管多达4列。 TABLE将有不同数量的ROW，因此长度不同。
this is the code I use to generate the HTML... actually I changed it from ULs to TABLEs but it doesn't change my problem. I have a number of TABLEs which may vary from 1 to 8. The width of the container DIV where these tables will appear can host up to 4 columns. The TABLEs will have different amounts of ROWs therefore will differ in lengths.
$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>';
}
推荐答案
虽然提供的建议和建议确实有帮助，
Although advices and suggestion given were indeed helpful,
我解决了jQuery Masonry，一个jQuery插件的问题。
I solved the problem with jQuery Masonry, a jQuery plugin
我不确定是否有更好的方法，但这只是工作
I'm not sure whether there are better ways to do it, but this one just worked
Isotope，另一个jQuery插件看起来类似于Masonry，可能做同样的工作，尚未测试： http://isotope.metafizzy.co/
Isotope, another jQuery plugin that looks similar to Masonry, could probably do the same job as Masonry but I haven't tested yet: http://isotope.metafizzy.co/
感谢您阅读
这篇关于浮动无序列表（UL），彼此相邻，并将它们堆叠在彼此的底部，没有边距或空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
