在另一个div里面的不同高度的div ...都在顶部？

Question

首先关闭... codepen for example

好的，所以我对编码html和CSS（2周）感到很陌生，并且在定位和显示方面遇到了一些相当困难的事情。我在智力水平上理解他们，但后来我试着把它们弄得一团糟用于练习，当它呈现时我有很多wtf时刻。

无论如何，我正在制作一个练习项目页面，其目标是在我收集的关于我的新努力的所有链接中制作一个html页面，如果你愿意的话。

刚开始我正在尝试构建基本的底层布局，这就是......

连续3个列表，每个链表示不同类别的链接（即编码，字体，教程等），然后在下一行和下一行等3个列表。基本上形成列。

我试过这两种方式。两者都导致我试图修复同样的问题。

1. 创建3个div并在每个div中放入1个列表。指定列表的宽度，将div设置为inline-block和... render！

2. 创建1 div然后将包含列表（设置宽度）的3个div（设置为inline-block）放在大div内。

问题：

当其中一个列表大于另外两个列表时，它会拉伸包含div（示例2）的高度或它所在的行（exmpale 1）而其他两个div则降到最低点。

我想要那些其他的div ..好吧，所有的div都在包含div的TOP并向下延伸。我不希望任何不像最高列表div那么高的div掉到底部。

here it is again on codepen

你可以看到确切的例子和问题。

我尝试使用vertical-align:top对齐以及定位混合相对和绝对的各种组合以及一些灾难性后果，主容器div现在甚至不使用整个边距：0 auto thingy ... so ，我不知道wtf。

如果可以，请看看并帮忙。

谢谢！

Answer 1

你为什么不用桌子？或者它真的必须与div一起？