CSS中的table-cell属性使用实例教程

    <div style="padding:70px 80px 10px 10px; background: #F57900; color:#fff;">HTML5</div>   
    <div style="padding:80px 80px 10px 10px; background: #BC1D49; color:#fff;">CSS3</div>   
</div>  

利用列宽度自动调节这个特点可以作左固定右自适应布局：

CSS Code复制内容到剪贴板

<style type="text/css">   
    .left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}   
    .classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}   
</style>   
<div class="left">我是左边栏目</div>   
<div class="classtd">   
    我是自适应的右边   
</div>  

有童鞋可能会对这个布局中的width:3000px感到迷惑。那么下面就贴上这个布局的原理：
display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。