第一种方法：
<!doctype> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> .one { position: absolute; height: 200px; width: 300px; background-color: blue; } .two { height: 200px; margin-left: 300px; background-color: red; } </style> </head> <body> <p class="one"></p> <p class="two">第一种方法</p> </body> </html>
第二种方法：
<!doctype> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> .one { float:left; height: 200px; width: 300px; background-color: blue; } .two { overflow: auto; height: 200px; background-color: red; } </style> </head> <body> <p class="one"></p> <p class="two">第二种方法</p> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
css3视觉特效的实现
动态加载css详解
css3的webkit-tap-highlight-color属性如何使用
以上就是左侧固定，右侧自适应的布局方式的详细内容。