方法一

html代码：

1 
     
      2   
      
3   
      
4 
     

css代码：

1 .left { 2    background-color: #7ccd7c; 3    height: 200px; 4    float: left; /*看这里*/ 5  } 6 .right { 7   background-color: #000080; 8   height: 200px; 9   overflow: hidden; /*看这里*/10 }

 两行代码搞定！

ps：IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，right那块会换行，left那块也不会出现滚动条。

  

方法二

html代码同上。

css代码：

1 .left { 2   background-color: #7ccd7c; 3   height: 200px; 4   width: 300px; 5   float: left; /*看这里*/ 6 } 7 .right { 8   background-color: #000080; 9   height: 200px;10   margin-left: 300px; /*看这里*/11 }

 也是两行代码搞定！

ps：IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，right不会换行，就是看不见了，left那块也不会出现滚动条。

效果：

   

方法三

左边

position:absolute;

就可以了。

不过这样，IE8的时候（只测试到IE8），当可视宽度缩小到比left的width还小的时候，left那块会出现滚动条。