×

css自适应布局(左右固定中间自适应或者右侧固定左侧自适应)

下载文档

ID：8811872

大小：13.90 KB

页数：3页

时间：2018-04-08

收藏

资源描述：

《css自适应布局(左右固定中间自适应或者右侧固定左侧自适应)》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局 右侧固定宽度左侧自适应 或者 三列布局左右固定中间自适应的问题。    下面我们分别来学习下，当然我也是总结下而已，有如以下方法：     一： 右侧固定宽度左侧自适应　 第一种方法：左侧用margin-right，右侧float：right 就可以实现。    HTML代码可以如下写:         我是龙恩   

　      

2、=""target="_blank">我是龙恩   

　CSS代码可以如下写：   .box-left{height:300px;margin-right:300px;background:#DDD;}   .box-right{width:300px;height:300px;float:right;background:#AAA;}   如上代码就可以实现效果。    第2种方法：左侧同样用margin-right 右侧采用绝对定位如下代码所示：   HTML代码如下：         

3、="bd-left">         我是龙恩      

               我是龙恩      

4、px;position:absolute;top:0;right:0;background:#AAA;} 第三种方法：右侧浮动且用负margin值 HTML代码如下：                            我是龙恩                              

5、get="_blank">我是龙恩          CSS代码如下： .wrap{overflow:hidden;background:#EEE;} .wrap-right{width:300px;position:relative;float:right;margin-left:-300px;background:#AAA;} .wrap-left{width:100%;float:left;} .left-con{margin-right:300px;background:#DDD;} .left-con,.wrap-

6、right{height:300px;}以上是我总结的三种htmlcss两列布局方法(左侧自适应右侧固定)，如有不足的地方请大家多多指教。下面我们来看看三列布局(左右固定中间自适应的情况)。 二：左右固定中间自适应的情况 我目前总结了2种方法如下： 第一种：左右侧采用浮动中间采用margin-left和margin-right方法。 代码如下：         这是右侧

7、的内容固定宽度     这是左侧的内容固定宽度     中间内容，自适应宽度    第二种：左右两侧采用绝对定位中间同样采用margin-leftmargin-right方法： HTML代码如下：  

8、ss="mainbar">