div+css经典三行两列布局_html/css_WEB-ITnose-HTML Tutorial-php.cn

div+css经典三行两列布局_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:32

Original

1671 people have browsed it

写在前面

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

[HTML/CSS]说说position

代码

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

 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>

Copy after login

结果