在同一条线上的两个浮动容器

Question

我在这里看到了很多关于浮点数的问题，但他们不能帮助我解决这个问题。

图片：http://img818.imageshack.us/img818/7289/ewd.png

蓝色框相对页面居中，红色框在蓝色的左侧。我需要红色和蓝色的盒子在同一顶线(以隐藏绿色)。

下面是html：

<article class="post">

  <aside class="post-meta">
    <img src="img.png">
  </aside>

  <section class="post-content">
    Content of the post.
  </section>

</article>

以下是scss：

.post {
  clear: both;

  .post-meta {
    position: relative;
    float: left;
    width: 150px;
    left: -150px;
  }

  .post-content {
    float: right;
  }
}

感谢您的帮助！

Answer 1

试试这个：-

.post {
    position: relative;

.post-meta {
    background-color: red;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 200px;
}
.post-content {
    background-color: yellow;
    margin-left: 200px;
}
        // keep the size of margin-left and width of .post-meta equal...
    }

非scss工作演示：- http://jsfiddle.net/UwQDT/1/

谢谢..。

Answer 2

这就是它：

.post {
  position: relative;

  .post-meta {
    position: absolute;
    left: -150px;
    width: 150px;
}