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;
}

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

2 个答案: