web前端html+css双飞翼布局(圣杯布局)代码!国民老实人(www.jiuxuan.xyz)宗九尘博客

双飞翼布局和圣杯布局其实差不多,并且都是都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局

实现的效果大致是这样的,如图:

image.png

圣杯布局 container要float: left

container预留padding左右, 然后main占100%宽度

左边的margin: -100%, position设为relative

为什么左边的是-100%, 因为-左边padding预留位置就会跑到上一行mian那一行

但是是在最右边, 那还是要跑去最左边才可以, 也就是再继续靠左, 加起来就是100%width


双飞翼布局是, container只有包裹住中间的main

然后左右用margin来空出位置

中间的main要预留出左右位置, 不过用的是marin左右预留

左边的也是要margin-left: -100%

不同的是左边的不需要relative定位


废话不多说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>宗波尘客www.zbck123.com</title>
   <style>
       *{
           padding: 0;
           margin: 0;
       }
       #page{
           height: 700px;
           background-color: black;
       }
       #hd{
           height: 100px;
           background-color: darkorange;
       }
       #bd{
           height: 500px;
           background-color: cornsilk;
       }
       #ft{
           height: 100px;
           background-color: pink;
       }

       .sub{
           float: left;
           width: 190px;
           margin-left: -100%;
           background-color: skyblue;
           height: 100%;
       }
       .main{
           float: left;
           width: 100%;
           height: 100%;
       }
       .main_wrap{
           margin: 0 230px 0 190px;
           background-color: aquamarine;
           height: 100%;
       }
       .extra{
           float: left;
           width: 230px;
           margin-left: -230px;
           background-color: blueviolet;
           height: 100%;
       }
   </style>
</head>
<body>

<div id="page">
   <div id="hd">
       <p>Header</p>
   </div>
   <div id="bd">
       <div class="main">
           <div class="main_wrap">
               <p>Main</p>
           </div>
       </div>
       <div class="sub">
           <p>Sub</p>
       </div>
       <div class="extra">
           <p>Extra</p>
       </div>
   </div>
   <div id="ft">
       <p>Footer</p>
   </div>
</div>
</body>
</html>ml>

web前端html+css双飞翼布局(圣杯布局)代码!国民老实人(www.jiuxuan.xyz)宗九尘博客

以上代码效果图展示:

image.png

页面缩小展示:

image.png

web前端html+css双飞翼布局(圣杯布局)代码!国民老实人(www.jiuxuan.xyz)宗九尘博客