将固定宽度层内可变高度的浮动元素相互底部对齐，行之间没有边距或空格

Question

我有一系列由以下 PHP 代码生成的 UL：

$groups = array();
foreach ($related->posts as $post) {
    $groups[$post->post_type][] = $post;
    }
foreach ($groups as $name => $posts) {
    printf('<ul class="related-group related-%s ">', htmlspecialchars($name));
    foreach ($posts as $post) {
        printf('<li class="related-item"><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></span><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></span></li>');
    }
echo '</ul>';
}

• UL 数量会有所不同。
• 每个 UL 具有可变数量的 LI（高度）和固定宽度。
• 每个 UL 在固定宽度容器 DIV 中向左浮动。
• 可能最多有两行可变长度的浮动 UL。

现在的问题是，通过这种方式，上面的 PHP 生成的 HTML 将创建行，其中 UL 元素将堆叠在由上面行中最高的 UL 设置的边距的底部。我想要的是将 UL 堆叠在彼此的底部，没有边距。

这个jsfiddle说明了我的问题： http://jsfiddle.net/5d5eM/

我不知道如何以一种允许我创建列来垂直对齐 UL 并同时水平均匀分布 UL 的方式更改上述 PHP。

也许有一些 javascript/jquery 解决方案...但我不知道。有什么建议吗？

谢谢你！

ps - 这是最初发布在这里的问题的转发： 浮动无序列表（UL）彼此相邻，并将它们堆叠在彼此的底部，没有边距或空格我重新发布的原因我通过友好的答案意识到它不能用简单的 CSS 来完成，因为我的代码是由 PHP 生成的并且存在一些变量。由于编辑和提出的其他问题，之前发布的问题变得有点混乱，所以我想清除它并更清楚地重新提出它。

Answer 1

我不懂 php，但我正在努力让这个工作。让我们从这里开始吧。

   $groups = array();
    foreach ($related->posts as $post) {
        $groups[$post->post_type][] = $post;
    }

在这里获取 $groups 的大小。
例如。 $sizeof_groups = sizeof($groups);

如果你将 $sizeof_groups 除以 4（你说你需要四列），你将得到你需要的行数。例如，如果 $sizeof_groups 为 4（4 个无序列表），则只需要 1 行。

所以 $numberOfRows = $sizeof_groups/4;

也可以有余数。如果有的话，我们还需要一“排”。

if($sizeof_groups % 4 != 0 )
    $numberOfRows++;

现在

for(i=0 ; i<=4 ; i++) // you need four columns
{
    echo '<div class="myDiv">';
        for(j=0 ; j<=$numberOfRows; j++)
        {

              foreach ($groups as $name => $posts) {
                   printf('<div><ul class="related-group related-%s ">',                     htmlspecialchars($name));
                   foreach ($posts as $post) {
                         printf('<li class="related-item"><span><a                   href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></span><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></span></li>');
    }
echo '</ul></div>';
}
echo '</div>';


}

旧评论：

我想你可以调整你的 php 代码以在一个 div 中显示两个列表。我希望这有帮助：

HTML：

<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
</div>

</div>



<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

</div>


<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

</div>

CSS：

div {
   width: 50px;
    border: 1px solid #000;
    float: left;
}

.myDiv{
     width: 50 px;   
    float left;

}


br { clear: left; }

Answer 2

我用 jQuery Masonry 解决了这个问题，这是一个 jQuery 插件

http://masonry.desandro.com/

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

也起作用了 Yoshi 从这个线程报告了 Isotope，另一个看起来类似于 Masonry 的 jQuery 插件，但我还没有测试过：http://isotope.metafizzy.co/

感谢您的阅读和光临