div+css经典三行两列布局

浏览数：39 / 时间：2015年06月09日

写在前面

在面试的时候遇到这样一个笔试题，使用div+css布局一个三行两列的页面。这里主要考察的是css中postion的具体用法。详细信息可参考我这篇文章：

代码

闲来无事，就自己动手实现了一下，代码如下：

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <title>首页</title>
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11         }
12 
13         div {
14             border: 1px solid red;
15         }
16         /*整个容器*/
17         #main {
18             position: relative;
19             height: 768px;
20         }
21         /*头部*/
22         #head {
23             position: absolute;
24             height: 10%;
25             width: 100%;
26         }
27         /*左部*/
28         #left {
29             width: 15%;
30             position: absolute;
31             height: 80%;
32             top: 10%;
33         }
34         /*内容部分*/
35         #content {
36             position: absolute;
37             top: 10%;
38             left: 15%;
39             width: 85%;
40             height: 80%;
41             border-bottom: -1px;
42         }
43         /*下部*/
44         #foot {
45             position: absolute;
46             width: 100%;
47             height: 9.5%;
48             bottom: 0px;
49         }
50     </style>
51 </head>
52 <body>
53     <div id="main">
54         <div id="head">
55          
56         </div>
57         <div id="left">
58 
59         </div>
60         <div id="content"></div>
61         <div id="foot">111111</div>
62 
63     </div>
64 </body>
65 </html>