css常见三列布局例子代码

作者：袖梨 2022-06-25

一、固定宽度三列布局

 代码如下 复制代码


 
 

  

   

    aside
    


















   

  

  

   

    

     main
     


















    

   

   

    

     content-aside
     


















    

   
   
  

 

 

#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 980px; margin: 0 auto;}
#aside{ float: left; width: 240px; background: #ccc;}
#content{ margin-left: 240px;}
#main{ float: left; width: 540px; background: pink;}
#content-aside{  float: left; width: 200px; background: orange; }
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}


 

效果如下所示

css常见三列布局例子代码


二、自适应宽度三列布局

 代码如下 复制代码


 
 

  

   

    aside
    


















   

  

  

   

    

     main
     


















    

   

   

    

     content-aside
     


















    

   
   
  

 

 

#header{ width: 96%; height: 90px; margin: 0 auto; background: #f60;}
#container{ width: 96%; margin: 0 auto;}
#aside{ float: left; width: 240px; background: #ccc;}
#content{ margin-left: 240px;}
#main{ float: left; width: 100%; background: pink;}
#main .inner{ padding-right: 200px;}
#content-aside{ float: left; width: 200px; margin-left: -200px; background: orange; }
#footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}

效果如下

css常见三列布局例子代码

相关文章

精彩推荐