- 浮动大概思路是将前两个元素分别向左,向右浮动, 然后第三个自然就上来了。
<div class="a"></div> <div class="c"></div> <div class="b"></div> .a{ float:left; 50px; height:70px; background:orange; } .c{ float:right; 50px; height:70px; background:blue; } .b{ height:70px; background:red; }
- 负边距。也需要用到浮动。
1 <div class="wrap"> 2 <div class="main">cc</div> 3 </div> 4 <div class="left">vvv</div> 5 <div class="right">bbbb</div> 6 7 .wrap{ 8 float:left; 9 100px;//随屏幕宽度变化 10 } 11 12 .main{ 13 background:red; 14 margin-left:aaa;//aaa表示左边元素留出来的宽度。 15 margin-right:bbb;//bbb表示给右边元素留出来的的宽度。 16 } 17 18 .left{ 19 aaa; 20 float:left; 21 background:green; 22 margin-left:-100%;//设为-100%可以上移一行。 23 } 24 .right{ 25 float:left; 26 bbb; 27 background:blue; 28 margin-left:-bbb; //设置和自身宽度一样的负边距,刚好把自己移上去。 29 }
神马双飞翼布局就是按着来的。