如何在不改变html的情况下获得黄色div中的蓝色div

Question

如何在不更改html且不在蓝色div上使用否定顶部div的情况下获得黄色margin的蓝色div？

CSS

  <style type="text/css">
      #main {width:600px;border:1px solid red;overflow:hidden;height:800px}
      .float-left {width:200px;height:100px}
      #right-side {float:right;background:blue;width:400px}
      #one {background:yellow}
      #two {background:green}
      #three {background:brown}
      #four {background:orange}
      </style>

HTML              

    <div id="main">

      <div class="float-left" id="one">
        <img width="129" height="150" alt="" src="jmg.jpg">
      </div>

      <div class="float-left" id="two">bbbbbbb, Abbbbbbb</div>
      <div class="float-left" id="three">+77 (0) 778 16887 399</div>

      <div class="float-left" id="four"><a href="mailto:ccc@cccc.com">ccccc@cccc.com</a></div>

      <div id="right-side">
          <p>hello how are you.</p>
          <p>i'm fine</p>
      </div>
    </div>

在此处查看实时示例 http://jsbin.com/uvuyo3/3

Answer 1

位置：相对于容器，然后绝对定位蓝色div右上方

http://jsbin.com/uvuyo3/4/

Answer 2

如果左栏总是200px宽，你绝对可以定位它：

#main {width:600px;border:1px solid red;overflow:hidden;height:800px;position:relative;}
.float-left {width:200px;height:100px}
#right-side {float:right;background:blue;width:400px;position:absolute;left:200px;top:0;}

不要忘记position:relative;上的#main。