一、左右布局，左侧div绝对定位，外div相对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;padding: 0;} 9 .container{ 10 width: 1000px; 11 margin:0 auto; 12 background: #c6c; 13 position: relative; 14 } 15 .side{ 16 width: 200px; 17 background: #c66; 18 height: 100%; 19 position: absolute; 20 top:0; 21 left: 0; 22 } 23 .content p{padding-left: 210px;color: #fff;} 24 </style> 25 <body> 26 <div class="container"> 27 <div class="side">side</div> 28 <div class="content"> 29 <p>驿外断桥边，</p> 30 <p>寂寞开无主。</p> 31 <p>已是黄昏独自愁，</p> 32 <p>更著风和雨。</p> 33 <p>无意苦争春，</p> 34 <p>一任群芳妒。</p> 35 <p>零落成泥碾作尘，</p> 36 <p>只有香如故。</p> 37 <p>只有香如故。</p> 38 <p>只有香如故。</p> 39 <p>只有香如故。</p> 40 <p>只有香如故。</p> 41 </div> 42 </div> 43 </body> 44 </html>
2.左侧div左浮动，右div加背景
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;padding: 0;} 9 .container{ 10 width: 1000px; 11 margin:0 auto; 12 background: #c6c; 13 overflow: hidden; 14 } 15 .side{ 16 width: 200px; 17 float: left; 18 } 19 .content{background: #6c6;margin-left: 200px;} 20 .content p{color: #fff;padding-left: 10px;} 21 </style> 22 <body> 23 <div class="container"> 24 <div class="side">side</div> 25 <div class="content"> 26 <p>驿外断桥边，</p> 27 <p>寂寞开无主。</p> 28 <p>已是黄昏独自愁，</p> 29 <p>更著风和雨。</p> 30 <p>无意苦争春，</p> 31 <p>一任群芳妒。</p> 32 <p>零落成泥碾作尘，</p> 33 <p>只有香如故。</p> 34 <p>只有香如故。</p> 35 <p>只有香如故。</p> 36 <p>只有香如故。</p> 37 <p>只有香如故。</p> 38 <p>只有香如故。</p> 39 <p>只有香如故。</p> 40 </div> 41 </div> 42 </body> 43 </html>
3.通过padding正值，margin负值实现，参考别人的代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;padding: 0;} 9 .container{ 10 width: 1000px; 11 margin:0 auto; 12 overflow: hidden; 13 } 14 .side{ 15 width: 200px; 16 background: #c66; 17 float: left; 18 padding-bottom:2000px; 19 margin-bottom: -2000px; 20 } 21 .content{ 22 margin-left: 200px; 23 background:#c6c; 24 padding-bottom:2000px; 25 margin-bottom: -2000px; 26 } 27 .content p{color: #fff;padding-left: 10px;} 28 </style> 29 <body> 30 <div class="container"> 31 <div class="side">side</div> 32 <div class="content"> 33 <p>驿外断桥边，</p> 34 <p>寂寞开无主。</p> 35 <p>已是黄昏独自愁，</p> 36 <p>更著风和雨。</p> 37 <p>无意苦争春，</p> 38 <p>一任群芳妒。</p> 39 <p>零落成泥碾作尘，</p> 40 <p>只有香如故。</p> 41 <p>只有香如故。</p> 42 <p>只有香如故。</p> 43 <p>只有香如故。</p> 44 <p>只有香如故。</p> 45 </div> 46 </div> 47 </body> 48 </html>
4.通过左浮动和margin-left负值来实现，参考别人的代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS特效-两列等高布局效果</title> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <style type="text/css"> 7 *{margin:0;padding:0} 8 html{overflow-y:scroll} 9 body{font-size:12px;background:#fff;color:#333} 10 ul,ol{list-style:none} 11 a{text-decoration:none;color:#f30} 12 img{border:none} 13 .clearfix{zoom:1} 14 .clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both} 15 .ct_wrap{width:950px;margin:0 auto;zoom:1;background:#e0e0e0;} 16 .content{margin-left:150px;background: #c66;} 17 .main_col{float:left;width:100%;word-wrap:break-word} 18 .side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word} 19 20 </style> 21 </head> 22 <body> 23 24 <div class="ct_wrap"> 25 <div class="content clearfix"> 26 <div class="main_col"> 27 <p>驿外断桥边，</p> 28 <p>寂寞开无主。</p> 29 <p>已是黄昏独自愁，</p> 30 <p>更著风和雨。</p> 31 <p>无意苦争春，</p> 32 <p>一任群芳妒。</p> 33 <p>零落成泥碾作尘，</p> 34 <p>只有香如故。</p> 35 <p>只有香如故。</p> 36 <p>只有香如故。</p> 37 <p>只有香如故。</p> 38 <p>只有香如故。</p> 39 <p>只有香如故。</p> 40 <p>只有香如故。</p> 41 </div> 42 <div class="side_col">我可以有背景色</div> 43 </div> 44 </div> 45 </body> 46 </html>