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

Question

我在这里看到了很多关于 float 的问题，但他们帮不了我。

图片: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/

谢谢...