在張鑫旭大神那邊看到的方法，我自己寫了一遍，稍微添加了一些自己的風格特色。
IE6/7不支持這個屬性，從IE8開始支持這個屬性，對於IE6/7可以用display:inline-block解決。
table-cell同樣會被其他一些css屬性破壞，栗如：float和position:absolute。設置了table-cell的元素對寬度高度敏感，對margin值沒有反應，響應padding屬性。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 60%; margin: 60px auto 0; padding: 20px; background: #f5f5f5; } .clearfix:after { display: block; content: '.'; clear: both; height: 0; visibility: hidden; } .head_img { float: left; margin-right: 10px; width: 100px; height: 100px; } .head_img img { width: 100%; height: 100%; border: 0; } .content { display: table-cell; *display: inline-block; } </style> </head> <body> <div class="box clearfix"> <a href="javascript:;" class="head_img"><img src="images/sunny.jpg"/></a> <div class="content"> <p><a href="javascript:;">winter</a> 來自挪威</p> <p>簽名：晴天。</p> <p> 微博：故事的小黃花 從出生那年就飄着<br/> 童年的盪秋千 隨記憶一直晃到現在<br/> Re So So Si Do Si La<br/> So La Si Si Si Si La Si La So<br/> 吹着前奏 望着天空<br/> 我想起花瓣 試着掉落<br/> 為你翹課的那一天<br/> 花落的那一天<br/> 教室的那一間 我怎么看不見<br/> 消失的下雨天 我好想再淋一遍<br/> 沒想到 失去的勇氣我還留着<br/> 好想再問一遍 你會等待還是離開<br/> </p> </div> </div> </body> </html>
效果圖：
歡迎指正，謝謝！