zoukankan      html  css  js  c++  java
  • 圣杯布局

     1 (没有flex之前)
     2 <!DOCTYPE html>
     3 <html lang="en">
     4 
     5 <head>
     6     <meta charset="UTF-8">
     7     <title></title>
     8     <style>
     9         body {
    10             margin: 0;
    11             padding: 0;
    12             color: #fff;
    13         }
    14 
    15         /*
    16         1)设置父元素container的位置
    17         2)将主体部分的三个子元素都设置左浮动
    18         3)设置main宽度为100%,让其单独占满一行
    19         4)设置left和right 负的外边距
    20         5)使用相对定位移动left和right到对应的位置
    21         */
    22 
    23         .container {
    24             min- 400px;
    25             height: 200px;
    26             background-color: greenyellow;
    27             /*腾出位置  放置左右*/
    28             padding: 0 200px;
    29         }
    30 
    31         .left,
    32         .right {
    33              200px;
    34             height: 200px;
    35             background-color: red;
    36             float: left;
    37         }
    38 
    39         .main {
    40              100%;
    41             height: 200px;
    42             background-color: blue;
    43             float: left;
    44         }
    45 
    46         .left {
    47             margin-left: -100%;
    48             /* 中间的宽度 */
    49             position: relative;
    50             /* 自身的宽度 */
    51             left: -200px;
    52         }
    53 
    54         .right {
    55             /* 被宽度挤下来了 */
    56             margin-left: -200px;
    57             position: relative;
    58             right: -200px;
    59         }
    60     </style>
    61 </head>
    62 
    63 <body>
    64     <!--容器-->
    65     <div class="container">
    66         <div class="main">
    67             中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏
    68         </div>
    69         <div class="left">左边栏</div>
    70         <div class="right">右边栏</div>
    71     </div>
    72 </body>
    73 
    74 </html>
  • 相关阅读:
    hihocoder 1049 后序遍历
    hihocoder 1310 岛屿
    Leetcode 63. Unique Paths II
    Leetcode 62. Unique Paths
    Leetcode 70. Climbing Stairs
    poj 3544 Journey with Pigs
    Leetcode 338. Counting Bits
    Leetcode 136. Single Number
    Leetcode 342. Power of Four
    Leetcode 299. Bulls and Cows
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11110010.html
Copyright © 2011-2022 走看看