css一侧固定宽度，一侧宽度自适应

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

1：左侧用margin-right，右侧float：right 就可以实现。

html：

<div class="main1 main">
<div class="right">固定宽度区<img src="http://img.mukewang.com/56551e2800014fa909600720-240-180.jpg" alt=""></div>
<div class="left">自适应区</div>
</div>

css：

.main1{
            vertical-align: 
            text-bottom;
            overflow: hidden;
            border:1px solid #00f;
        }
        .main1 .left{
            margin-right: 310px;
            border:1px solid #f00;
            overflow: hidden;
        }
        .main1 .right{
            width: 300px;
            float:right;
            border:1px solid #f00
        }

注意：html中right必须在left之前！

div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度,不要用p之类的替换。

记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。

 2：左侧同样用margin-right  右侧采用绝对定位 ,非常不推荐，父元素高度会塌陷

 

html:

<div class="main2 main">
<div class="left2">自适应区</div>
<div class="right2">固定宽度区<img src="http://img.mukewang.com/56551e2800014fa909600720-240-180.jpg" alt="">叫你别用绝对定位，父元素高度都塌陷了</div>
</div>

css:

.main2 {
            position: relative;
            border:1px solid #00f;
            float: left;
            margin-top: 20px;
            width: 100%;
          }
          .main2 .right2 {
            width: 300px; 
            position: absolute; 
            right: 0; 
            top: 0;
            border:1px solid #f00
          }
          .main2 .left2{
            margin-right: 310px;
            border:1px solid #f00
        }

 

3、左右都浮动且右侧用负margin值，和第一种差别不大

html:

<div class="main3 main">
<div class="left3">自适应区</div>
<div class="right3">固定宽度区<img src="http://img.mukewang.com/56551e2800014fa909600720-240-180.jpg" alt="">固定宽度区</div>
</div>

css:

.main3 {
            width: 100%;
            border:1px solid #00f;
            margin-top: 300px;
            overflow: hidden;
          }
          .main3 .right3 {
               width:300px; 
               margin-left:  -304px;/*  设置box-sizing:border-box就可以设置为-300px */
               border:1px solid #0f0;
               float:left;
           }
          .main3 .left3{
             width:100%;  
             border:1px solid #0f0;

　　　　　　　　float:left;

}

 

4、右侧float:right，左侧包裹在一层div中，再设置margin值和右侧显示在一行
  html：

<div class="main4">
<div class="left4">
<div class="left4b">自适应区</div>
</div>
<div class="right4">固定宽度区<img src="http://img.mukewang.com/56551e2800014fa909600720-240-180.jpg" alt="">固定宽度区</div>
</div>

css:

.main4 {
            width: 100%;
            border:1px solid #00f;
            margin-top: 20px;
            overflow:hidden;
          }
        .right4 {
            width: 300px; 
            float: right;
            border:1px solid #0f0
          }
          .left4 {
            margin-left: -310px; 
            float: left; 
            width: 100%;
            border:1px solid #f00
          }
          .left4b {
            margin-left: 310px;
            border:1px solid #f00
          }

 

5、标准浏览器的方法，极力推荐

  w3c标准方法：

 html:

<div class="main6">
<div class="left6">
固定宽度区</div>
<div class="right6">固定宽度区<img src="http://img.mukewang.com/56551e2800014fa909600720-240-180.jpg" alt="">固定宽度区</div>
</div>

css:

.main6 {
            width: 100%;
            border:1px solid #00f;
            margin-top: 20px;
            overflow:hidden;
            display: table;
          }
        .right6 {
            width: 300px; 
            display: table-cell;
            border:1px solid #0f0
          }
          .left6 {
            display: table-cell;
            border:1px solid #f00
          }

 

 

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

1、左右侧采用浮动 中间采用margin-left 和 margin-right 方法。

 代码如下：

   <div style="width:100%; margin:0 auto;"> 
       <div style="width:200px; float:right; 这是右侧的内容 固定宽度</div>
       <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>
       <div style="margin-left:150px;margin-right:200px; 中间内容，自适应宽度</div>
    </div>

2、左右两侧采用绝对定位 中间同样采用margin-left margin-right方法：

 HTML代码如下：

 <div class = "sidebar ”></div>
 <div class = "mainbar”></div>
 <div class = "r-sidebar”></div>

CSS代码如下：

 .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;
}

3、左右侧采用浮动 中间overflow:hidden，极力推荐