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

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

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

浮动ULs彼此左移很容易。。。但我不知道如何去掉保证金

-----更新----

这是我用来生成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>';
}

$groups=array（）；
foreach（$related->posts as$post）{
$groups[$post->post\u type][]=$post；
}
foreach（$name=>$posts的组）{
printf（“”，htmlspecialchars（$name））；
foreach（$posts作为$post）{
printf（“”）；
}
回声'；
}

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

---

对不起，我不知道你是否能找到这些链接。jsfiddle.net目前似乎负载很重。

好吧，这个解决方案可能不会专门回答您的问题，但它可以帮助您解决问题：

您将无法按照您建议的方式使用float来完成此操作。我能想到的唯一解决方案是将元素分成左浮动的分组

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插件或类似的东西，可以让你动态地定位元素，但我不知道是怎么回事。

尽管给出的建议和建议确实很有帮助

我用jQuery插件jQueryMashine解决了这个问题

我不确定是否有更好的方法，但这一种很有效

同位素，另一个jQuery插件，看起来类似于砌体，可能可以做同样的工作，砌体，但我还没有测试：

---

感谢您的阅读和来访

不幸的是，这行不通；我不能这样做，因为UL是由PHP生成的，我不知道什么列在什么列下，UL的数量将根据db查询而变化；我知道可能最多有4列，但其中包含的ULs数量可能会有所不同（从1到8…），我想你可以按照Matt K的建议使用PHP将ULs分发到不同的列中-但是你找到的插件太棒了！我甚至可以把它作为书签留到以后！谢谢Zac，正如你所见，最后我修复了这个插件，简单快捷，无需重新发明轮子（现在）：）这可能值得写出来作为答案，并接受它，以防其他人正在寻找类似的解决方案-我不确定未回答的问题是否会获得同样多的流量…感谢JSFIDLE，但不幸的是，我无法预测我将拥有多少ULs，因为此HTML是由PHP生成的，所以我无法分发ULs在div中，因为ul的数量会变大，只要你一列一列地插入它们就无所谓了（例如，1，2，3，4，[重新开始！]1，2，3，4）。我添加了用于生成HTML的PHP代码-实际上是因为我准备了yestrda上面的图像，但同时出于设计原因，我从ULs切换到了表，事实上，它并没有改变发行文件不应该用于设计布局，只用于表格数据。一种更简单的方法是，如我所述，创建一个空的基于列的布局，然后使用PHP循环浏览您的“帖子”，并回显一些javascript，将它们一个接一个地插入到列中。您是对的，但这是一件临时的事情，我在处理一些CSS时恢复到ULs。。。我想最好的是使用一些直接的javascript，我正在搜索一些jQuery插件，也许它确实存在一些可以使用的好问题！我今天遇到了完全相同的问题，我很惊讶三年后它仍然没有一个CSS唯一的解决方案。不过，我在答案中看到了一些好的建议。