自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左右两边固定,中间自适应,且中间内容优先显示布局的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!
页面布局如下:
第一种:左右两边绝对定位法,中间用margin-left、margin-right;
#main{margin:0 200px; overflow: hidden;background: #ccc;}
#left{position:absolute; top:0; left:0;width:200px;background: #ff0;}
#right{ position: absolute;top:0;right:0; width:200px; background: #0ff;}
第二种:中间的盒子绝对定位,左右两边的盒子左右浮动
#main{position: absolute; top:0; left:200px; right:200px;background:#ccc;}
#left{float:left;width:200px;background: #ff0;}
#right{float:right;width:200px; background: #0ff;}
自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!
#lt{ float: left;width:200px;background: #ff0;}
#rt{ overflow: hidden; background:#f0f;}
#lt{ float: left; width:200px;background: #ff0;}
#rt{ margin-left: 200px;background: #f0f;}
#lt{ position:absolute; top:0; left:0; width:200px; background:#ff0;}
#rt{ margin-left: 200px;background: #f0f;}
#lt{ position: absolute; top:0 ; left:0 ;width:200px;background: #ff0;}
#rt{ position: absolute; top:0 ; left:200px;width: 100% ; rigth:0;background: #f0f;}
#lt{float:left; width:100%;background:#00f;margin-right: -200px;}
#rt{float: right; width: 200px;background:#ff0;}
#lt{margin-right:200px; background:#00f;}
#rt{ position: absolute;right:0; top:0; width: 200px;background: #ff0;}
#lt{
position: absolute;top:0;
left:0;
rigth:0;
width:100% ;
background: #f0f;
}
#rt{
position: absolute;top:0;
left:200px;
width:200px;background: #ff0;
}
自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!
页面布局如下:
一、左边固定,右边自适应的布局
1. 左边左浮动,右边加个overflow:hidden;
2. 左边左浮动,右边加个margin-left;
3. 左边绝对定位,右边加个margin-left;
4. 左右两边绝对定位,右边加个width,top,left,right
效果图如下:
二、右边固定,左边自适应的布局
1. 左边左浮动,margin-left负值,右边右浮动;
2. 右边绝对定位,左边margin-right;
3. 左右两边绝对定位,左边加个width,top,left,right
效果图如下: