css - 为什么这个内容从 div 的底部开始？

Question

我创建了一个左侧菜单的设计，但是文本从底部开始，而不是从顶部开始。

这开始发生在我在右侧插入地图后，使用以下代码：

#map {
    height: 100%;
    width: 100%;
}

这是完整代码的 jsFiddle

Answer 1

只需添加

#wrapper > div > #middleleft {
    vertical-align:top;
}

演示：http: //jsfiddle.net/KfMjZ/4/

Answer 2

添加vertical-align: top;到您的#wrapper > div > #middleleftcss 块中，如下所示：

#wrapper > div > #middleleft {
    background: #565656;
    vertical-align: top;
}

Answer 3

似乎没有人愿意回答你关于它为什么会这样做的实际问题。所以这里。

那里发生了一些非常奇怪的事情。这是一个奇怪的，这是肯定的。如果你没有在地图上设置高度，那么它就是vertical-align:top。

谷歌的 javascript 似乎在搞砸一些东西。它似乎只发生在 Internet Explorer 中。

真正令人着迷的一点是，如果您使用 IE 开发人员工具挖掘 html 并关闭地图上的高度，然后它会返回到顶部，如果您重新打开它，它会保持在顶部。这告诉我这是 javascript 中的某些东西以某种方式弄乱了该字段的布局。

换句话说，这是一个错误。您可以使用其他人提到的方法来解决它。