二、三栏布局（左右宽度固定，中间自适应宽度）

 

方法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>
复制代码
posted @ 2015-12-12 12:50  Ctrl+V  阅读(197)  评论(0)  编辑  收藏  举报