方法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>
时间： 2024-07-29 09:56:24