CSS adaptive layout (left and right fixed, middle adaptive or right fixed, left adaptive)_html/css_WEB-ITnose

经常在工作中或者在面试中会碰到这样的问题，比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。

     下面我们分别来学习下，当然我也是总结下而已，有如以下网站源码方法：

     一： 右侧固定宽度 左侧自适应

　 第一种方法：左侧用margin-right，右侧float：right  就可以实现。

    HTML代码可以如下写:
    

        我是龙恩
    

　

        我是龙恩
    

　 CSS代码可以如下写：

    .box-left{height:300px;margin-right:300px;background:#DDD;}
    .box-right{width:300px;height:300px;float:right;background:#AAA;}

    如上代码就可以实现效果。

    第2种方法：左侧同样用margin-right  右侧采用绝对定位 如下代码所示：

    HTML代码如下：

   

        

            我是龙恩
        

        

            我是龙恩
        

    

 CSS代码如下：

 .bd{position:relative;}
 .bd-left{height:300px;;margin-right:300px;background:#DDD;}
 .bd-right{width:300px;height:300px;position:absolute;top:0;right:0;background:#AAA;}

 第三种方法：右侧浮动 且 用负margin值

 HTML代码如下：

 

        

            

                我是龙恩
            

        

        

            我是龙恩
        

    

  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-right{height:300px;}

以上是我总结的三种html css 两列布局方法(左侧自适应 右侧固定)，如有不足的地方 请大家多多指教。下面我们来看看三列布局(左右固定 中间自适应的情况)。

 二：左右固定 中间自适应的情况

 我目前总结了2种方法 如下：

 第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。

 代码如下：

   

 
      

这是右侧的内容 固定宽度

 

This is the fixed width of the content on the left

 

Middle content, adaptive width

Second type: The left and right sides use absolute positioning, and the middle also uses the margin-left margin-right method:

The HTML code is as follows:

< /div>

The CSS code is as follows ：

.l-sidebar {
width:200px;
height:500px;
position:absolute;
top:0;
left:0;
background:blue;
}
.mainbar {
margin-left:200px;
height:500px;
margin-right:300px;
background:green;
}
.r-sidebar {
width:300px;
height:500px;
position:absolute;
top:0;
right:0;
background:blue;
}

The above is some summary of our daily work! If there is any deficiencies, please leave a message! ! Let’s discuss and learn from each other!

Source: http://www.codesocang.com/jiaocheng/CSS3jiaocheng/2014/0507/7469.html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn