HTML：
<div class="fix">
<div class="l"></div>
<div class="cell"></div>
</div>
CSS：
.fix{*zoom:1;}.fix:after{display:block; content:"clear"; height:0; clear:both; visibility:hidden;}
.l{float:left;}
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
?
?
修复连续单词字符换行的问题
对于pre标签，辅助：
white-space:pre-wrap;
对于td类标签，附加大致如下的CSS代码：
display:table; width:100%; table-layout:fixed; word-wrap:break-word;
?
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:table-cell下的自适应布局效果 </title>
<style>
.dn{display:none;}.db{display:block;}.dib{display:inline-block;}.di{display:inline;}
.h14{height:14px;}.h16{height:16px;}.h18{height:18px;}.h20{height:20px;}.h22{height:22px;}.h24{height:24px;}
.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}
.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1px;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}
.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
.g0{color:#000;}.g3{color:#333;}.g6{color:#666;}.g9{color:#999;}.wh{color:white;}
.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
.fa{font-family:Arial;}.ft{font-family:Tahoma;}.fv{font-family:Verdana;}.fs{font-family:'宋体';}.fw{font-family:'微软雅黑';}
.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}.tj{text-align:justify;}
.tdl{text-decoration:underline;}.tdn,.tdn:hover,a.tdl:hover{text-decoration:none;}
.lt0{letter-spacing:0;}lt1{letter-spacing:1px;}
.wrap{white-space:nowrap;}
.bk{word-wrap:break-word;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vb{vertical-align:bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}
.l{float:left;}.r{float:right;}
.cl{clear:both;}
.rel{position:relative;}.abs{position:absolute;}
.zx1{z-index:1;}.zx2{z-index:2;}
.poi{cursor:pointer;}.def{cursor:default;}
.ovh{overflow:hidden;}
.vh{visibility:hidden;}.vv{visibility:visible;}
.z{*zoom:1;}
/*块状元素水平居中*/
.auto{margin-left:auto; margin-right:auto;}
/*清除浮动*/
.fix{*zoom:1;}.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
/*基于display:table-cell的自适应布局*/
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
/*双栏自适应cell部分连续英文字符换行*/
.cell_bk{display:table; width:100%; table-layout:fixed; word-wrap:break-word;}
/*单行文字溢出虚点显示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
</style>
</head>
<body>
<div id="main">
?<h1>display:table-cell下的自适应布局效果实例页面</h1>
??? <div id="body" class="light">
??? ?<div id="content" class="show">
??????? ?<h3>展示</h3>
???????????
??????????? <div class="demo">
??????????? ?<div class="fix auto" style="width:50%;">
??????????????? ?<img id="targetImage" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="128" class="l mr20" />
??????????????????? <div class="cell">
??????????????????? ?<p class="f14">【魔都惊现~以物换物~交换商店】原来电影《第36个故事》中那个小店现实真的存在~在虹口足球场附近的这家店里，看中什么物件，只要拿出家中闲置的物品交换就行。用一个闲置的蜡烛台，换一个古筝演奏家登台时佩戴的耳环；用一台Lomo相机，换几张爱情主题的邮票…你想交换什么？</p>
??????????????????????? <h6 class="f12">//zxx:无论图片宽度多少，布局总是自适应的~~</h6>
??????????????????? </div>
??????????????? </div>
??????????? </div>
??????????
?????????
??????? </div>??????
??? </div>
</div>
<script>
var eleImage = document.getElementById("targetImage"),
?widthInitImage = 0, isBeingLarge = true;
?
var funWidthImage = function() {
?var widthImage = eleImage.width;
?if (isBeingLarge) {
??widthImage += 2;
??if (widthImage > 256) {
???widthImage = 256;
???isBeingLarge = false;?
??}
?} else {
??widthImage -= 2;
??if (widthImage < widthInitImage) {
???widthImage = widthInitImage;
???isBeingLarge = true;?
??}??
?}
?eleImage.width = widthImage;
?
?setTimeout(funWidthImage, 50);
};
if (eleImage) {
?widthInitImage = eleImage.width;
?funWidthImage();
}
</script>
</body>
</html>