一列二列三列布局-CSDN博客

通过学习了div和css，下面来实现简单的一列，二列，三列布局，欢迎交流，指正！

　　1：一列居中布局

<!doctype html>
<html>
    <head>
       <title>一列布局</title>
       <meta charset="utf-8"> 
       <style type="text/css">
          *{padding:0;margin:0;font-size:14px;} 
          .top{width:800px;height:50px;background:blue;margin:0 auto}
          .main{width:500px;height:200px;background:green;margin:0 auto;} 
.footer{width:500px;height:50px;background:#000;margin:0 auto;}   
       </style>
   </head>
<body>
    <div class="top">top</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

　　2：二列自适应布局

 1 <!doctype html>
 2 <html>
 3     <head>
 4        <title>二列自适应布局</title>
 5        <meta charset="utf-8"> 
 6        <style type="text/css">
 7           *{padding:0;margin:0;font-size:14px;} 
 8           .left{width:20%;height:200px;background:blue;float:left}
 9           .right{width:80%;height:200px;background:green;float:right;} 
10        </style>
11    </head>
12 <body>
13     <div class="left">left</div>
14     <div class="right">right</div>
15  </body>
16 </html>

　　　　二列固定布局

 1  <!doctype html>
 2  <html>
 3       <head>
 4          <title>二列固定布局</title>
 5          <meta charset="utf-8"> 
 6          <style type="text/css">
 7             *{padding:0;margin:0;font-size:14px;} 
 8             .content{width:800px;background:blue;margin:0 auto}
 9             .left{width:500px;height:200px;background:green;float:left;} 
10             .footer{width:300px;height:200px;background:green;float:right;}   
11          </style>
12      </head>
13  <body>
14      <div class="content">
15          <div class="left">left</div>
16          <div class="right">right</div>
17      </div>
18  </body>
19  </html>

　　3：三列布局

左右二列宽度固定，中间一列宽度自适应，使用了定位position:absolute来使左右分别固定在左上角和右上角，然后中间那列利用margin来设置

  <!doctype html>
  <html>
      <head>
         <title>三列布局</title>
         <meta charset="utf-8"> 
         <style type="text/css">
            *{padding:0;margin:0;font-size:14px;} 
            .left{width:300px;height:200px;background:blue;position:absolute;left:0;top:0;}
            .main {height:200px;background:green;margin:0 300px 0 300px;} 
 .right{width:300px;height:200px;background:green;position:absolute;right:0;top:0;}   
        </style>
    </head>
 <body>
        <div class="left">left</div>
         <div class="main">main</div>
         <div class="right">right</div> 
 </body>
 </html>

总结：平时所看到页面，大多数都是混合布局。三列布局和面试所说圣杯布局类似，圣杯布局它的目标是左右两栏定宽，中间那一行流式

<div id="header"></div>

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>

</div>

<div id="footer"></div>

css样式可以自己思考，方法不止一种。

转载于:https://www.cnblogs.com/kevoin/p/4866471.html