css - 如何在不更改html的情况下使蓝色div与黄色div一致

Question

如何在不更改 html 且不在蓝色 div 上使用负顶部 margin 的情况下在黄色 div 行中获得蓝色 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

position: relative the container, then absolutely position that blue div top right

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