div布局（持续更新）

1、

效果：

代码：

 <!DOCTYPE html>

 <html>

 <head>
     <meta name="viewport" content="width=device-width" />
     <title>首页</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }

         div {
             border: 1px solid black;
         }

         #main {
             position: relative;
             width: 200px;
             height: 200px;
         }

         #top-left {
             position: absolute;
             top: 0%;
             width: 50%;
             height: 90%;
         }

         #top-right {
             position: absolute;
             top: 0%;
             left: 50%;
             width: 50%;
             height: 90%;
             border-bottom: -1px;
         }

         #bottom {
             margin: 0 auto;
             position: absolute;
             top: 90%;
             left: 0%;
             width: 100%;
             height: 10%
         }
     </style>
 </head>

 <body>
     <div id="main">
         <div id="top-left">顶部左</div>
         <div id="top-right">顶部右</div>
         <div id="bottom">底部</div>
     </div>
 </body>

 </html>