1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.   <meta charset="utf-8">
    6.   <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    7. </head>
    8. <style>
    9.   body {
    10.     min-width: 550px;  /* 2x leftContent width + rightContent width */
    11.     font-weight: bold;
    12.     font-size: 20px;
    13.   }
    15.   #header, #footer {
    16.     background: rgba(29, 27, 27, 0.726);
    17.     text-align: center;
    18.     height: 60px;
    19.     line-height: 60px;
    20.   }
    21.   #footer {
    22.     clear: both;
    23.   }
    25.   #container {
    26.     padding-left: 200px;   /* leftContent width */
    27.     padding-right: 150px;  /* rightContent width */
    28.     overflow: hidden;
    29.   }
    31.   #container .column {
    32.     position: relative;
    33.     float: left;
    34.     text-align: center;
    35.     height: 300px;
    36.     line-height: 300px;
    37.   }
    39.   #center {
    40.     width: 100%;
    41.     background: rgb(206, 201, 201);
    42.   }
    44.   #left {
    45.     width: 200px;           /* leftContent width */
    46.     right: 200px;           /* leftContent width */
    47.     margin-left: -100%;
    48.     background: rgba(95, 179, 235, 0.972);
    49.   }
    51.   #right {
    52.     width: 150px;           /* rightContent width */
    53.     margin-left: -150px;   /* rightContent width */
    54.     right: -150px;
    55.     background: rgb(231, 105, 2);
    56.   }
    58. </style>
    60. <body>
    61.   <div id="header">#header</div>
    62.   <div id="container">
    63.     <div id="center" class="column">#center</div>
    64.     <div id="left" class="column">#left</div>
    65.     <div id="right" class="column">#right</div>
    66.   </div>
    67.   <div id="footer">#footer</div>
    70. </body>
    72. </html>
    73. ————————————————
    74. 版权声明：本文为CSDN博主「@Demi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    75. 原文链接：https://blog.csdn.net/qq_38128179/article/details/86533976