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

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 中向左浮动。
• 可能最多有两行可变长度的 float UL。

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

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

我不知道如何更改上述 PHP，让我可以创建列来垂直对齐 UL，同时水平均匀分布 UL。

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

谢谢!

ps - 这是最初发布在这里的问题的转发:Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces我重新发布它的原因是我通过答案意识到它不能用简单的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; }