常用的页面布局（两栏布局，圣杯、双飞翼布局）

最新推荐文章于 2022-02-15 20:02:02 发布

ZY-LMP

最新推荐文章于 2022-02-15 20:02:02 发布

阅读量477

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45645412/article/details/112788294

版权

常用的页面布局（两栏布局，圣杯、双飞翼布局）

前言：他们都遵循以下要点

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的

外层标签

1.两栏布局：左边定宽，右边自适应：

<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

#left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

2.圣杯和双飞翼布局

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

2.1：圣杯布局

DOM结构

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

首先：给他们的父盒子设置一个

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

给左边盒子和右边盒子设置一个固定的宽度，中间盒子100%

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

3.然后使用定位方法

左边盒子

#left {
  margin-left: -100%;
  position: relative;
  right: 200px;
}

右边盒子

#right {
  margin-right: -150px; 
}

2.2：双飞翼布局

前言：它跟圣杯布局大致上是一样的，只不过圣杯布局的三个子元素都是被父元素包裹起来的，而双飞翼布局，父元素只包裹了中间的盒子

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

首先：给两边的盒子一个固定的宽度，然后给中间盒子一个margin-left: 200px;margin-right: 150px;把两边盒子的位置预留出来‘

#center {
  margin-left: 200px;
  margin-right: 150px;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

给左边盒子一个负的外边距

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

给右边盒子一个负的外边距

#right {
  margin-left: -150px;
}

3.也可用flex布局完成圣杯布局

<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}

注意：最后我们要设置最小的宽度，要不然在页面缩小的时候，右边的盒子会覆盖中间的盒子

body {
  min-width: 500px;
}

ZY-LMP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的页面布局（两栏布局，圣杯、双飞翼布局）

常用的页面布局（两栏布局，圣杯、双飞翼布局）前言：他们都遵循以下要点两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的外层标签1.两栏布局：左边定宽，右边自适应：<div id="left">左边定宽</div><div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>左边左浮动，右边加oveflow:hidden;变成BFC清
复制链接

扫一扫