将无序列表（UL）并排浮动，并将它们堆叠在彼此的底部，没有边距或空格

Question

我有多个无序列表 (UL) 元素。请查看下图：

我想要做的是让 UL 彼此相邻浮动。 UL 具有不同的内容长度 (LI)，因此一些 UL 比其他的长。当我在有限宽度的 div 层中将 UL 彼此相邻浮动时，最后一个 UL 会浮动在底部/左侧。但是……如果有更长的 UL，就会有一些空间。我希望 UL 在每个 UL 元素的底部向左浮动并堆叠，没有空格。有没有办法通过 HTML/CSS 实现这一点？

浮动 UL 彼此离开很容易......但我不知道如何摆脱边距

----- 更新----

这是我用来生成 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 Masonry 解决了这个问题，一个 jQuery 插件

http://masonry.desandro.com/

我不确定是否有更好的方法来做到这一点，但这个方法很有效

Isotope，另一个看起来类似于 Masonry 的 jQuery 插件，可能可以做与 Masonry 相同的工作，但我还没有测试过：http://isotope.metafizzy.co/

感谢您的阅读和光临

Answer 2

好吧，这个解决方案可能无法具体回答您的问题，但它可能会帮助您解决问题：

您将无法按照您建议的方式使用 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 插件或类似的东西可以让你动态定位元素，但我不知道我的头。

Answer 3

如果您将它们垂直堆叠，那将是可能的。这个jsfiddle here 说明了您的问题，下一行项目将从前一行中最长 ul 到达的位置开始。您可以将 ul 插入原始列以垂直堆叠 ul，而不是为新行创建新列。看看this jsfiddle 看看有什么不同。

抱歉，不知道您是否可以访问这些链接。 jsfiddle.net 现在似乎负载很重。