Html 柱状div被拉到容器底部

三栏布局，所有三栏占据页面的1/3。高度100%

包含最多

的列决定了所有三列的高度。其他的都被“拉”到了它的高度

我希望所有三个栏目的高度相同，推文在顶部。列底部的空白区域，用灰色（背景）填充

我只是不明白为什么他们会被拖到底部。当您将.thirdCol中的高度设置为400px（例如）时，它会变得非常有趣

有什么想法吗？我相信这很简单，但我只是错过了。谢谢

（使用Chrome+Opera BTW）

jsfiddle中的代码- HTML:

---

按如下方式修改CSS：

.thirdCol {
    width:32.5%;
    display:inline-block;
    background-color:grey;
    min-height:100%;
    vertical-align: top;
}

默认情况下，内联块与文本的基线垂直对齐，该基线对应于每个文本块最底行的基线级别

---

注意：获取背景颜色有点棘手…

按如下方式修改CSS：

.thirdCol {
    width:32.5%;
    display:inline-block;
    background-color:grey;
    min-height:100%;
    vertical-align: top;
}

默认情况下，内联块与文本的基线垂直对齐，该基线对应于每个文本块最底行的基线级别

---

注意：获取背景颜色有点棘手…

作为

内联块

可以使用垂直对齐控制对齐：

---

就相同高度的列而言，CSS中的人造列有许多技巧。查看CSS技巧了解更多信息。

作为

内联块

您可以使用垂直对齐控制对齐：

就相同高度的列而言，CSS中的人造列有许多技巧。查看CSS技巧了解更多信息。

您可以尝试以下方法：

您可以尝试以下方法：

---

垂直对齐：顶部就是这样。完美的谢谢。
垂直对齐：顶部就是这样。完美的非常感谢。
.thirdCol {
    width:32.5%;
    display:inline-block;
    background-color:grey;
    min-height:100%;
    vertical-align: top;
}

#FeedsTab > div{
    vertical-align: top;
}

.thirdCol
{
  width:32.5%;
  display:inline-block;
  background-color:grey;
  min-height:100%;
  vertical-align:top;
}