当前位置：首页 > news >正文

圣杯布局和双飞翼布局

news 来源：原创 2025/6/6 18:37:47

这两种布局都是为了实现，左右固定宽度，中间区域占100%，且响应式伸缩。

圣杯布局代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.container {position: relative;height: 200px;padding: 0 200px 0 150px;}.main, .left, .right {float: left;height: 100%;}.main {background-color: forestgreen;width: 100%;}.left {position: relative;background-color: aqua;margin-left: -100%;left: -150px;width: 150px;}.right {position: relative;background-color: pink;margin-left: -200px;right: -200px;width: 200px;}</style>
</head>
<body><div class="container"><div class="main">中间</div><div class="left">左边</div><div class="right">右边</div></div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双飞翼布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {overflow: hidden;}.main-wrapper {float: left;width: 100%;}.main, .left, .right {height: 200px;}.main {margin: 0 200px 0 150px;background-color: pink;}.left {float: left;background-color: aqua;margin-left: -100%;width: 150px;}.right {float: left;background-color: greenyellow;margin-left: -200px;width: 200px;}</style>
</head>
<body><div class="container"><div class="main-wrapper"><div class="main">中间自适应内容</div></div><div class="left">左侧固定栏（150px）</div><div class="right">右侧固定栏（200px）</div></div>
</body>
</html>