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

Question

position:我已经尝试了我能想到的每一种组合来对齐#blog并#sidebar沿着它们的顶部边缘，但我所做的一切似乎都不起作用。有任何想法吗？

CSS：

#blog-container {
    margin: 0 auto;
    width: 960px;
}
#blog {
    float: left;
    margin-top: 80px;
    position: relative;
    width: 620px;
}
#sidebar {
    float: right;
    margin-top: 80px;
    position: relative;
    width: 300px;
}

HTML：

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

Answer 1

首先包含侧边栏（在 HTML 中）并使其向右浮动，然后是博客并将其向左浮动。

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