等高布局实例
实例代码：
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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS等高布局</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 #wrap{ 12 overflow:hidden; 13 width:1000px; 14 margin:0 auto; 15 } 16 #left,#center,#right{ 17 margin-bottom:-200px; 18 padding-bottom:200px; 19 } 20 #left{ 21 float:left; 22 width:250px; 23 background:#00FFFF; 24 } 25 #center{ 26 float:left; 27 width:500px; 28 background:#FF0000; 29 } 30 #right{ 31 float:right; 32 width:250px; 33 background:#00FF00; 34 } 35 p{line-height: 20px} 36 </style> 37 </head> 38 <body> 39 <div id="wrap"> 40 <div id="left"> 41 <p>left</p> 42 <p>left</p> 43 <p>left</p> 44 <p>left</p> 45 <p>left</p> 46 </div> 47 <div id="center"> 48 <p>center</p> 49 <p>center</p> 50 <p>center</p> 51 <p>center</p> 52 <p>center</p> 53 <p>center</p> 54 <p>center</p> 55 <p>center</p> 56 <p>center</p> 57 <p>center</p> 58 </div> 59 <div id="right"> 60 <p>right</p> 61 <p>right</p> 62 <p>right</p> 63 </div> 64 </div> 65 </body> 66 </html>
原理：给等高个元素用
padding 来填充，然后用 margin 来消除 padding 带来的影响。未定高父元素的高度是子元素最大的高度（margin+padding+height）计算的，中间子元素高度最大，所以父容器的高度是200px。
超出父元素的部分会被截取，左边下内边距被截取100px，中间下内边距被截取200px，右边下内边距被截取60px，剩余部分都相等。
下面填充的边距长度一定要大于截取的长度。
