欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

常见的 三列布局方法

发布时间:2016-07-17  编辑:杨雨个人博客网站   点击:   

布局基础很重要,忍不住又把div布局拿出来看看

方法一

<style type="text/css">
Html,body{
margin:0;
height:100%;
}
.left,.right{
position:absolute;
top:0;
width:200px;
height:100%;
}
.left{
left:0;
background:#a0b3d6;
}
.right{
right:0;
background:#a0b3d6;
}
.main{
margin:0 210px;
background:#ffe6b8;
height:100%;
}
</style>

<div class="left"></div>
<div class="main"></div>
<div class="right"></div>

此方法在浏览器缩小到很小的情况下,会发生重叠现象。

方法二

<style type="text/css">
Html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style>

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
如果不设置Html.body的高度为100%的话,#left,#right#main上加的百分比就不能撑开整个父容器 本文地址:http://itbyc.com/web/9410.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1