关于多列布局

使用display:table-cell;可以实现页面的多列布局，从而可以做成自适应的页面。但是在进行页面布局时，一定要将父元素设置成display:table；  否则，宽度的百分比就不起作用。

<div style="width:100%;display: table">
<div style="width: 10%;display: table-cell;border: 1px #000 solid">
第一列
</div>
<div style="display: table-cell;border: 1px #ddd solid">
第二列
</div>
<div style="display: table-cell;width: 10%;border: 1px #165379 solid;">
第三列
</div>
</div>

但是，这个并不是组好的多列布局方式。对页面进行多列布局时，最好还是使用absolute+div。

<div style="width:100%;">
<div style="width: 10%;border: 1px #000 solid;float: left;position: absolute;left: 0px">
第一列
</div>
<div style="border: 1px #ddd solid;position: absolute;width: 100%;left: 10%;right: 10%">
第二列
</div>
<div style="width: 10%;border: 1px #165379 solid;float: left;position: absolute;right: 0px">
第三列
</div>
</div>