星空网 > 软件开发 > 网页设计

实现一个三列布局(左右侧固定,中间自适应宽度)

html代码(第一二种方法):

<div class="left">左侧固定区</div><div class="right">右侧固定区</div><div class="mid">中间自适应区</div>

 

css代码:

第一种方法(定位):

.left { position: absolute; top: 0; left: 0; width: 100px; height: 200px; background-color: red; } .mid { margin-left: 100px; margin-right: 200px; height: 200px; background-color: blue; } .right { position: absolute; top: 0; right: 0; width: 200px; height: 200px; background-color: yellow; }

 

第二种方法(浮动):

.left { float: left; width: 100px; height: 200px; background-color: red;}.mid { height: 200px; background-color: blue;}.right { float: right; width: 200px; height: 200px; background-color: yellow;}

 

第三种方法(负边距):

html代码:

<div class="center fl"> <div class="mid">   中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区 </div></div><div class="left fl">左边固定区</div><div class="right fl">右边固定区</div>

 

css代码:

.fl { float: left; }.center { width: 100%; height: 200px; background: yellow;} .center .mid{  margin-right: 100px;  padding: 0 110px; }.left{  margin-left: -100%;  width: 100px;  height: 200px;  background: green;}.right{  margin-left: -200px;  width: 200px;  height: 200px;  background: blue;}

 




原标题:实现一个三列布局(左右侧固定,中间自适应宽度)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

tiktok如何更改地区:https://www.goluckyvip.com/tag/82364.html
怎么登录国际版tiktok:https://www.goluckyvip.com/tag/82365.html
国外的tiktok怎么加速:https://www.goluckyvip.com/tag/82366.html
tiktok用加速器吗:https://www.goluckyvip.com/tag/82367.html
tiktok节点多少钱:https://www.goluckyvip.com/tag/82368.html
ios看tiktok:https://www.goluckyvip.com/tag/82369.html
深圳玉龙公园簕杜鹃花海花期时间+门票+交通:https://www.vstour.cn/a/365174.html
出境旅游预订须知:https://www.vstour.cn/a/365175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流