CSS三列布局之左右宽度固定，中间元素自适应问题-pwy

最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导 哈。

首先我想到的是float——浮动布局

使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Document   title  > 
   head  > 
   body  > 
       div   style  ="width:300px; float:left; background:#6FF"  > 左侧的内容 固定宽度   div  > 
       div   style  ="width:200px; float:right; background-color:#960"  > 右侧的内容 固定宽度   div  > 
       div   style  ="margin-left:300px;margin-right:200px; background-color:#9F3;"  > 中间内容，自适应宽度   div  > 
   body  > 
   html  >  

查看更多关于CSS三列布局之左右宽度固定，中间元素自适应问题-pwy的详细内容...