Html 垂直对齐：容器内顶部两个浮动div

我尝试了

位置的每一种组合：

我能想到的将

#blog

和

#侧边栏

沿其顶部边缘对齐，但我所做的一切似乎都不起作用。有什么想法吗

CSS:

HTML:

首先包括侧边栏（在HTML中）并向右浮动，然后是博客并向左浮动

<div id="blog-container">
    <div id="sidebar">
        <content/>
    </div><!-- end sidebar -->
    <div id="blog">
        <content/>
    </div><!-- end blog -->
</div><!-- end blog-container -->

实际上，它们对齐得很好：。。。您在哪个浏览器中遇到此问题？奇怪的是，我使用的是Firefox 15.0.1。我附上了一张我现在看到的图片。我的目标是让teal社交按钮与木制帖子标题框的顶部对齐。你为什么在这里使用相对定位？@Diodeus在阅读了其他几篇文章后说，这似乎是实现垂直对齐的常用方法。很明显，在这种情况下它不起作用，所以我愿意接受你的任何建议。这是我最初尝试的解决方案之一，尽管交换了

位置，但没有做出任何可见的更改。你能发布一个链接到你遇到问题的站点吗？该站点还不是很活跃，但是这里有一个例子，您需要从.social类中删除

padding top:200px

——您的侧边栏实际上位于顶部，它只是被填充。当出现这样的间距问题时，我通常会在有问题的容器周围放置任意边框，以查看其边框的位置-类似地，您可以右键单击并在Chrome中“inspect element”，当您将鼠标悬停在inspector中的标记上时，它将以蓝色突出显示容器，以绿色填充，以橙色突出显示边距。哦，你完全正确。我对侧边栏和页脚都使用了相同的

.social

——页脚中的填充非常重要，侧边栏中显然不是这样。将侧边栏元素更改为

.blog social

解决了这一问题。很抱歉忽略了这么一件小事，但谢谢你的回答！

<div id="blog-container">
    <div id="blog">
        <content>
    </div><!-- end blog -->
    <div id="sidebar">
        <content>
    </div><!-- end sidebar -->
</div><!-- end blog-container -->

<div id="blog-container">
    <div id="sidebar">
        <content/>
    </div><!-- end sidebar -->
    <div id="blog">
        <content/>
    </div><!-- end blog -->
</div><!-- end blog-container -->