css - 2个浮动容器在同一条线上

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 {
    position: absolute;
    left: -150px;
    width: 150px;
}

Answer 2

试试这个： -

.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/

谢谢...