css多列布局（实例）

文章出处：原文地址

前言

1. 一列布局

2. 二列布局

3. 三列布局

1 一列布局

• 一列布局：

  

  HTML部分html>
  
  head
  main
  foot
  
  CSS部分
  div{text-align: center;}
  .head{height: 60px;background-color:#fae1e1;}
  .main{margin: 0 auto;height:300px;background-color:#e6686a;}
  .foot{margin: 0 auto;background-color:red;}

  

   

• 效果图如下：
  
  

2 二列布局

• 二列布局代码如下（即左右布局），二列布局有多种方法，float+margin（一侧定宽，一侧自动）、position+margin（一侧定宽，一侧自动）、float+负margin（一侧定宽，一侧自动）等，本篇用的是设定两栏的宽度的百分比，随宽度自适应变化代码如下：

  

  HTML部分html>
  
  
  left
  right
  
  
  CSS部分
  body{ margin:0; padding:0; font-size:20px; font-weight:bold}
  div{ text-align:center; line-height:50px}
  .main{ width:80%; height:400px; margin:0 auto}
  .left{ width:20%; height:400px; background:#e6686a; float:left}
  .right{ width:80%; height:400px; background:#fae1e1; float:right}

  

   

• 效果图如下：
  
  

3 三列布局

• 三列布局（即左中右布局），三列布局有多种方法，float+margin（两侧定宽，中间自适应）、position+margin（两侧定宽，中间自适应）、float+负margin（两侧定宽，中间自适应）、float+position+margin（两侧自动，中间定宽）、position+margin（两侧自动，中间定宽），本篇用的是float+margin（两侧定宽，中间自适应），代码如下：
  

  

  HTML部分html>
  
  
    
    
  left
  main
  right
  
  CSS部分
  body{ margin:0; padding:0; font-weight:bold}
  div{ line-height:40px}
  .left{height:400px; width:200px; position: absolute; left:0; top:0;background:#fae1e1;}
  .right{ height:400px; width:200px; position:absolute; top:0;right:0;; background:#fae1e1}
  .center{ height:400px; margin:0 200px; background:#e6686a}

  

   

• 效果图如下：