开发者

How to get blue div in line of yellow div without changing the html

开发者 https://www.devze.com 2023-01-21 16:05 出处:网络
How to get blue div in line of yellow div without changing the html and without using negative top margin on blue div?

How to get blue div in line of yellow div without changing the html and without using negative top margin on blue 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">
    开发者_StackOverflow中文版    <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>

See live example here http://jsbin.com/uvuyo3/3


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

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


If the left column will always be 200px wide, you can absolutely position it:

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

Don't forget the position:relative; on #main.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号