css 圣杯布局和双飞翼布局_css圣杯和双飞-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42744920/article/details/127318873

本文介绍网页设计中的圣杯布局与双飞翼布局，这两种布局方式均可实现两边固定、中间自适应的效果，并保持三列等高。圣杯布局通过调整外边距和内边距实现内容显示，而双飞翼布局则通过额外添加内部元素并设置内边距来解决内容显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、圣杯布局

圣杯布局的要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变

要求：
1、两边固定，中间自适应；
2、先加载middle内容；
3、三列等高布局；

 <!-- 圣杯布局 -->
 <div class="wrap">
 <div id="header">header</div>
 <div id="content">
     <div id="middle">
     <p>middle</p>
     <p>middle</p>
     <p>middle</p>
     </div>
     <div id="left">left</div>
     <div id="right">right</div>
 </div>
 <div id="footer">footer</div>

实现步骤：

布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};

此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；

.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    border: 1px solid;
    background-color: grey;
}
#content{ 
  overflow: hidden;
  padding: 0px 200px;
}
#left,#right{
  width: 200px;
  height: 200px;
  background-color:pink;
}
#middle{
  background-color: green;
  width: 100%;
}
#middle,#left,#right{
  float: left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
#left{
  margin-left: -100%;
  position: relative;
  left: -200px;
}
#right{
  margin-left: -200px;
  position: relative;
  left: 200px;
}

二、双飞翼布局

需求和圣杯布局是一样的；

据说双飞翼是玉伯大大提的，思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；

  <!-- 双飞翼布局 -->
  <!-- html,middle中增加了middle-inner -->
  <div class="wrap">
      <div id="header">header</div>
      <div id="content">
        <div id="middle">
          <div class="middle-inner">
            middle
          </div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
      </div>
      <div id="footer">footer</div>
    </div>

实现步骤：

布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
以上，都和圣杯布局一样；
因为现在middle的内容被left和right覆盖了，我们除了考虑设置外围content的padding之外，还可以考虑用margin把middle拉过来；

在middle中加一个内部元素middle-inner，设置其margin:0 200px;

.wrap{
 	min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    border: 1px solid;
    background-color: grey;
}
#left,#right{
  width: 200px;
  height: 200px;
  background-color:pink;
}
#middle{
  background-color: green;
  width: 100%;
}
#middle,#left,#right{
  float: left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
#content{
  overflow: hidden;
}
#left{
  margin-left: -100%;
}
#right{
  margin-left: -200px;
}
.middle-inner{
  margin: 0 200px;
}