圣杯布局和双飞翼布局

圣杯布局(Holy Grail Layout)和双飞翼布局(Double Wings Layout)是两种常见的多列布局技术,用于实现一个固定宽度的主内容区域,以及左右两侧可变宽度的侧边栏。这两种布局都希望能够实现以下效果:

  • 主内容区域垂直排在页面最前面,占据剩余的宽度。
  • 左右两侧的侧边栏分别位于主内容区域的左右两侧,宽度可以自适应或指定。

下面是对两种布局的简要介绍:

1. 圣杯布局:

圣杯布局使用相对定位和负边距来实现侧边栏的定位。HTML结构如下:

html 复制代码
<div class="container">
  <div class="sidebar sidebar-left"></div>
  <div class="content"></div>
  <div class="sidebar sidebar-right"></div>
</div>

CSS样式如下:

css 复制代码
.container {
  padding: 0 200px; /* 左右侧边栏的宽度 */
}

.sidebar {
  float: left;
  width: 200px; /* 侧边栏的宽度 */
}

.sidebar-left {
  margin-left: -100%;
  position: relative;
  right: 200px; /* 右侧边栏的宽度 */
}

.content {
  float: left;
  width: 100%;
}

.sidebar-right {
  margin-left: -200px;
  position: relative;
  left: -200px;
}

2. 双飞翼布局:

双飞翼布局通过使用嵌套的<div>来实现侧边栏的定位,以及使用负外边距将主内容区域撑开。HTML结构如下:

html 复制代码
<div class="container">
  <div class="content">
    <!-- 主内容 -->
  </div>
</div>
<div class="sidebar sidebar-left"></div>
<div class="sidebar sidebar-right"></div>

CSS样式如下:

css 复制代码
.container {
  padding: 0 200px; /* 左右侧边栏的宽度 */
}

.content {
  margin: 0 200px; /* 左右侧边栏的宽度 */
}

.sidebar {
  float: left;
  width: 200px; /* 侧边栏的宽度 */
}
相关推荐
Madison-No73 分钟前
【C++】探秘string的底层实现
开发语言·c++
ziyue757511 分钟前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰32 分钟前
HTML语义化:当网页会说话
前端·html
冰万森37 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
lly2024061 小时前
AJAX JSON 实例
开发语言
牧羊人_myr1 小时前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
QiZhang | UESTC1 小时前
JAVA算法练习题day27
java·开发语言·c++·算法·leetcode·hot100
坚持就完事了1 小时前
2-C语言中的数据类型
c语言·开发语言