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

最新推荐文章于 2022-08-11 16:44:30 发布

dewuhuo4019

最新推荐文章于 2022-08-11 16:44:30 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/f-24/p/5041076.html

版权

方法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>

转载于:https://www.cnblogs.com/f-24/p/5041076.html

dewuhuo4019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、三栏布局（左右宽度固定，中间自适应宽度）

方法1、设置浮动，使文档脱离文档流，注意层的顺序.view{ height: 200px; background: #ccc;}#id1{float:left; width:200px;}#id2{float:right; width:200px;}#id3{background:red;}<body><div class="v...
复制链接

扫一扫