1.要求:如上图中的,三栏目布局,中间的MAIN是自适应浏览器的宽度,左LEFT固定宽200PX,右RIGHT固定宽200PX;
复制代码代码如下:
.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
2.现在要求先加载MIAN,其它要求同上面一样;
总结:主要是利用浮动元素的负外边距;
并且要理解float和绝对定位,这两种元素的宽度都是根据内容的宽度来的。
相对定位和块级元素,如果不设定宽,都是100%(相对于父级的宽)
复制代码代码如下:
.boxmain{float:left;margin-right:-200px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
完整代码:
提示:您可以先修改部分代码再运行
复制代码代码如下:
.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
2.现在要求先加载MIAN,其它要求同上面一样;
总结:主要是利用浮动元素的负外边距;
并且要理解float和绝对定位,这两种元素的宽度都是根据内容的宽度来的。
相对定位和块级元素,如果不设定宽,都是100%(相对于父级的宽)
复制代码代码如下:
.boxmain{float:left;margin-right:-200px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
完整代码:
提示:您可以先修改部分代码再运行
标签:
三栏布局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“DIV+CSS 三栏布局实例代码”评论...
更新日志
2024年10月09日
2024年10月09日
- 《崩坏:星穹铁道》造物大赛卷出新高度
- 《王菲 菲常传奇 2CD》[WAV+CUE][950MB]
- 《王菲 空灵独味唱腔 非常传奇 紫水晶2CD》[WAV+CUE][860MB]
- 《车载专业测试王1号 极品音质》[WAV/分轨][980MB]
- 炉石传说的国服回归送什么奖励 炉石传说9.25回归最新消息介绍
- 云顶之弈最强阵容汇总2024 云顶之弈最强阵容搭配最新版本
- S14lol全球总决赛在哪观看 lol全球总决赛观赛直播地址汇总
- 黄思婷2011-感谢天[豪记唱片][WAV+CUE]
- 孙淑媚2013-太阳[台湾首版][WAV+CUE]
- LaviniaMeijer-Voyage(2015)[WAV]
- 大雷肉腿美女姐姐Cos图赏:2B、约尔、露西等
- 《寂静岭2:重制版》《龙珠:电光炸裂!ZERO》销售榜前三:上PC的重要性!
- 隰县小西天扭转差评:副县长驻唱、文旅局长化身唐僧
- 《原神》「和声的回响」网页活动壁纸展示
- 原神「星路拾忆」网页活动壁纸展示(三)