类型一1，左右两侧，左侧固定宽度200px，右侧自适应占满代码如下<!doctype html><html><head><meta charset="utf-8"/><title>左右两侧，左侧固定宽度200px，右侧自适应占满</title><style>.box{ width:600px; height:500px; border:1px solid #ccc; margin:0 auto;}.left{ width:200px; height:500px; background-color:red; float:left;}.right{ height:500px; background-color:#00f; margin-left:200px;}</style></head><body><div class="box"> <div class="left"></div> <div class="right"></div></div></body></html><!doctype html><html><head><meta charset="utf-8"/><title>左右两侧，左侧固定宽度200px，右侧自适应占满</title><style>.box{ width:600px; height:500px; border:1px solid #ccc; margin:0 auto;}.left{ width:200px; height:500px; background-color:red; float:left;}.right{ height:500px; background-color:#00f; margin-left:200px;}</style></head><body><div class="box"> <div class="left"></div> <div class="right"></div></div></body></html>运行结果类型二2，左中右三列 左右固定200px 中间自适应占满代码如下<!doctype html><html><head><meta charset="utf-8"/><title>左中右三列 左右固定200px 中间自适应占满</title><style>.box{ width:800px; height:500px; border:1px solid #ccc; margin:0 auto;}.left{ width:200px; height:500px; background-color:red; float:left;}.right{ width:200px; height:500px; background-color:#00f; float:right;}.zhong{ height:500px; margin:0 200px; background-color:#f0f;}</style></head><body><div class="box"> <div class="left"></div> <div class="right"></div> <div class="zhong"></div></div></body></html>运行结果类型三3，上中下三行 头部200px高 底部200px高 中间自适应占满代码如下<!doctype html><html><head><meta charset="utf-8"/><title>上中下三行 头部200px高 底部200px高 中间自适应占满</title><style>.box{ width:600px; height:400px; border:1px solid #ccc; margin:0 auto; position:relative;}.top{ width:600px; height:100px; background-color:#ff0; position:absolute; top:0; left:0;}.zhong{ width:100%; background-color:#f0f; position:absolute; top:100px; bottom:100px;}.bottom{ width:600px; height:100px; background-color:#f00; position:absolute; bottom:0; left:0;}</style></head><body><div class="box"> <div class="top"></div> <div class="bottom"></div> <div class="zhong"></div></div></body></html>运行结果总结固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。即自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；固定宽度元素设置margin-left属性为负值：-100%；除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
