2021-07-28 响应式布局：左侧宽度固定右侧宽度自适应、双飞翼布局、圣杯布局

最新推荐文章于 2026-07-03 11:00:47 发布

原创最新推荐文章于 2026-07-03 11:00:47 发布 · 342 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学前端

本文探讨了三种响应式布局：左侧宽度固定右侧自适应、双飞翼布局和圣杯布局。双飞翼布局通过在主体内容中添加div并使用margin来避免左右盒子覆盖；圣杯布局则利用整体填充和相对定位实现。两种布局都确保主体内容最先加载。文章详细解释了各自的特点和实现方法。

三种布局都是最先加载出主体。
双飞翼布局与圣杯布局都是中间盒子宽度自适应，最先加载出主体
双飞翼布局与圣杯布局的不同之处在于：
双飞翼布局在主体内容中添加了一个div ，并对主体添加margin来使左右盒子不覆盖主体。
而圣杯布局并没有在主体中添加新的div，只是对整体添加左右填充、左右盒子添加相对定位，来达到效果。

左侧宽度自适应

body中需要先写出自适应宽度的div

	<div class="box">
        <div class="right">right</div>
        <div class="left">left</div>
    </div>

style中

.right {
            height: 400px;
            width: 100%;
            background-color: yellow;
            float:left;
        }
        .left {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;
        }

由于.right宽度为100%，所以浮动后.left在第二行。
在这里插入图片描述
欲使.left和.right在一行，对.left添加margin-left:-200px;

	.left {
		margin-left:-200px;
	}

此时
在这里插入图片描述
使.left在左侧显示,对.left更改margin-left:-100%;

	.left {
		margin-left:-100%;
	}

此时
在这里插入图片描述
虽然.left在.right的左侧显示，但是.right的内容被.left遮住了，因此，在.right内加一个div，并对新的div添加padding-left：200px;

	.content {
		padding-left:200px;
	}
	
	在body中的<div class="right"></div>中添加
	<div class="content">right</div>

此时有
在这里插入图片描述

双飞翼布局

同左侧宽度固定右侧宽度自适应。对中间的盒子再设置padding-right，最右侧盒子设置float：left，和margin-left即可。
在这里插入图片描述

圣杯布局

	div class="box">
        <div class="middle">
            123454565657689874652412446534534
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

		* {
            margin: 0;
            padding: 0;
        }
        .middle {
            height: 400px;
            width: 100%;
            background-color: yellow;
            float: left;
        }
  
        .left {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;
            margin-left: -100%;
         }
         .right {
            height: 150px;
            width: 150px;
            background-color: blue;
            float: left;
            margin-left: -150px;
        }

此时.left和.right都会覆盖.middle的内容，因此给.box添加左右margin,给左右盒子进行relative定位
在这里插入图片描述

	.box {
	margin:0 150px 0 200px;
	} 
	.left {
	position:relative;
	left:-200px;
	}
	.right {
	position:relative;
	left:150px;
	}

最终实现
在这里插入图片描述