html - 将无序列表 (UL) 并排 float ，并将它们堆叠在彼此的底部，没有边距或空格

Question

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

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

float 的 UL 很容易......但我不知道如何摆脱边距

-----更新----

这是我用来生成 HTML 的代码...实际上我将它从 UL 更改为 TABLE，但这并没有改变我的问题。我有许多 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

如果您将它们垂直堆叠，那将是可能的。这jsfiddle here说明您的问题，下一行元素将从上一行中最长 ul 到达的位置开始。您可以将 ul 插入原始列以垂直堆叠 ul，而不是为新行创建新列。看看this jsfiddle看看区别。

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