css布局练习之圣杯布局

最新推荐文章于 2022-06-28 10:11:14 发布

大海无量波涛凶

最新推荐文章于 2022-06-28 10:11:14 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_37164847/article/details/86539384

web 专栏收录该内容

145 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>圣杯布局</title>
       <style>
           .container {
   padding-left: 100px;
   padding-right: 100px;
   }
           .left{
               width: 100px;
               height: 200px;
               background: red;
               float: left;
               margin-left: -100%;
               position: relative;
left: -100px;
           }
           .right{
               width: 100px;
               height: 200px;
               background: yellow;
               float: left;
               margin-left: -100px;
               position: relative;
right: -100px;
           }
           .main{
               float: left;
               width: 100%;
               height: 200px;
               background: blue;

           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="main">中间</div>
           <div class="left">左侧</div>
           <div class="right">右侧</div>
       </div>
   </body>
</html>

转载：https://www.jianshu.com/p/8b308d63fe23