标签:
方法1、设置浮动,使文档脱离文档流,注意层的顺序
.view{ height: 200px; background: #ccc;} #id1{float:left; width:200px;} #id2{float:right; width:200px;} #id3{background:red;}
<body> <div class="view" id="id1">1、{float:left; width:200px;}</div> <div class="view" id="id2">2、{float:right; width:200px;}</div> <div class="view" id="id3">3、{background:red;}</div> </body>
方法2、同样通过负边距来实现,缺点是需要另外增加一个层
.view{ height: 200px; background: #ccc;} .warp{float:left;width:100%;} #id3{ background:red; margin-left:200px; margin-right:200px;} #id1{float:left; position:relative; width:200px; margin-left:-100%;} #id2{float:left; position:relative; width:200px; margin-left:-200px;}
<div class="warp"> <div class="view" id="id3"> 外层包裹warpdiv,设置外层warp CSS{float:left;width:100%;}内容放最前面有利于SEO<br> 内层div控制左右两边的距离 #id3{ background:red; margin-left:200px; margin-right:200px;} </div> </div> <div class="view" id="id1">左侧边负边距: #id1{float:left; position:relative; width:200px; margin-left:-100%;}</div> <div class="view" id="id2">右侧边负边距:#id2{float:left; position:relative; width:200px; margin-left:-200px;}</div>
方法3、也可以通过绝对定位来实现
.view{ height: 200px; background: #ccc;} #id3{margin-left:200px; margin-right:200px; background:red; min-width:200px;} #id1{position:absolute; left:0; top:0; width:200px;} #id2{float:right; width:200px; position:absolute; right:0; top:0;}
<div class="view" id="id3">顺序1、#id3{margin-left:200px; margin-right:200px; background:red;}</div> <div class="view" id="id1">顺序2、使用绝对定位 #id1{position:absolute; left:0; top:0; width:200px;}</div> <div class="view" id="id2">顺序3、使用绝对定位 #id2{float:right; width:200px; position:absolute; right:0; top:0;}</div>
标签:
原文地址:http://www.cnblogs.com/f-24/p/5041076.html