将无序列表(UL)放在彼此的旁边，并将它们堆叠在一起，没有空白处或空白处。
我有多个无序列表(UL)元素。请检查以下图片：
我想要做的是把ULs放在一起。ULs有不同的内容长度(LIs)，因此有些UL比其他的长。当我在有限宽度的div层中相互浮动ULs时，最后一个ULs在底部/左边浮动。然而..。如果有一个更长的UL，就会有一些空间。我希望ULs向左浮动，在每个UL元素的底部相互叠加，没有空格。有什么方法可以用HTML/CSS来实现这一点吗？
彼此之间的浮动很容易..。但我不知道怎么摆脱这个空白
-更新
这是我用来生成HTML的代码。实际上，我把它从ULs改为了表，但它并没有改变我的问题。我有许多表，可能从1到8不等。这些表出现的容器DIV的宽度最多可以容纳4列。表将有不同数量的行，因此长度不同。
$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>';
}回答 3
Stack Overflow用户
发布于 2012-01-18 21:24:06
虽然给出的建议和建议确实很有帮助，
我解决了jQuery砌体的问题，这是一个jQuery插件
http://masonry.desandro.com/
我不确定是否有更好的方法，但这一个才起作用
同位素，另一个看起来类似于砖石的jQuery插件，可能和砖石一样，但我还没有测试：http://isotope.metafizzy.co/。
谢谢你的阅读和来访
Stack Overflow用户
发布于 2012-01-17 14:44:18
如果你把它们垂直堆叠起来，那是可能的。这个小提琴手说明了您的问题，下一行的项目将从上一行中最长的ul到达的位置开始。不必为新行创建新列，您可以将ul的返回插入到原始列中，以垂直叠加ul的列。看一看这弹琴，看看不同之处。
对不起，不知道你能不能联系到这些链接。jsfiddle.net现在似乎承受着沉重的负担。
Stack Overflow用户
发布于 2012-01-17 14:50:45
这个解决方案可能没有具体回答你的问题，但它可以帮助你解决你的问题：
您将无法以您建议的方式使用float来完成此操作。我所能想到的唯一解决方案是将元素划分为分组DIVs (或您选择的块元素)，这些元素是向左浮动的。本质上，您将属于同一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插件或类似的东西，可以让您动态地定位元素，但我不知道是从头顶开始的。
https://stackoverflow.com/questions/8896306
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号