【三栏式布局、双飞翼布局、圣杯布局】09

三栏式布局

文章目录

三栏式布局
- 1. 用calc函数实现三栏式布局
- 2. 双飞翼布局
- 3. 圣杯布局

两边盒子固定宽度，中间盒子自适应的布局。

1. 用calc函数实现三栏式布局

<div class="wrap"><div class="left"></div><div class="middle"></div><div class="right"></div>
</div>

.wrap{width: 60%;border: 1px solid red;margin: 0 auto;/* 清除浮动:将父元素设置为BFC盒子 */overflow: hidden;
}.left{width: 150px;background-color: chartreuse;height: 300px;float: left;
}.right{width: 130px;background-color: cornflowerblue;height: 300px;float: left;
}.middle{width: calc(100% - 280px);height: 350px;background-color: rgba(170, 43, 138, 0.37);float: left;
}

2. 双飞翼布局

父元素包含左中右三个盒子，分别左浮动，中间元素宽度为100%（必须为第一个渲染）
用margin-left的赋值将两边盒子拉上去和中间盒子同行（左边-100%，右边-有盒子宽度）
给父元素清除浮动
中间元素设置子元素，并给其左右margin为左右盒子留位置

<div class="wrap"><div class="middle"><div class="child"></div></div><div class="left"></div><div class="right"></div>
</div>

.wrap{width: 60%;border: 1px solid red;margin: 0 auto;/* 清除浮动:将父元素设置为BFC盒子 */overflow: hidden;
}.left{width: 150px;background-color: chartreuse;height: 300px;float: left;margin-left: -100%;
}
.right{width: 130px;background-color: cornflowerblue;height: 300px;float: left;margin-left: -130px;
}
.middle{width: 100%;height: 350px;background-color: rgba(170, 43, 138, 0.37);float: left;
}.child{background-color: darkblue;height: 100%;margin: 0 130px 0 150px;
}

3. 圣杯布局

父元素包含左中右三个盒子，分别左浮动，中间元素宽度为100%（必须为第一个渲染）
用margin-left的赋值将两边盒子拉上去和中间盒子同行（左边-100%，右边-有盒子宽度）
给父元素清除浮动
父元素用左右padding为左右盒子留位置并用相对定位将左右元素移动到正确的位置上。

<div class="wrap"><div class="middle"></div><div class="left"></div><div class="right"></div>
</div>

.wrap{width: 60%;border: 1px solid red;margin: 0 auto;/* 清除浮动:将父元素设置为BFC盒子 */overflow: hidden;padding: 0 130px 0 150px;
}.left{width: 150px;background-color: chartreuse;height: 300px;float: left;margin-left: -100%;position: relative;left: -150px;
}
.right{width: 130px;background-color: cornflowerblue;height: 300px;float: left;margin-left: -130px;position: relative;right: -130px;
}
.middle{width: 100%;height: 350px;background-color: rgba(170, 43, 138, 0.37);float: left;
}

【三栏式布局、双飞翼布局、圣杯布局】09相关推荐

HTML(十二)三种常见布局：三栏式布局双飞翼布局圣杯布局
一.三栏式布局顾名思义,即是将主页分成三部分(左,中,右),给左边和右边的块定宽,中间的块占据余下部分.以下是几种常用的实现方法 1.巧用浮动优点:兼容性好,实现简单缺点:必须先写浮动元素,再写 ...
三个经典布局：三栏式布局、双飞翼布局、圣杯布局
1.三栏式布局三栏式布局就是左栏定宽左浮动,右栏定宽右浮动. <div class="wrap"><div class="left"> ...
经典布局（flex和传统两种实现）—左中右三栏式
1.浮动法父级宽度:80% 左右: 定宽高, 分别浮动向左,浮动向右中: margin: 0 200px; 定高注意,中间的块元素必须放在后面左右定宽,中间自适应 <!DOCTYPE h ...
左中右三栏式布局
一.中间自适应,左右两边宽度固定方法1:box容器 Flex布局,center设置为 flex:1 <!DOCTYPE html> <html lang="en&qu ...
HCJ2：页面两栏式或三栏式布局
2.1 简介大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示: 两栏式例子: 三栏式 2.2 方法 2.2.1 两栏式 .left-pane{width: 14%;heigh ...
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
一.布局方式介绍布局模型是基于盒模型基础上进行的拓展,关于布局有流式布局(标准的布局),浮动布局.定位布局.flex布局等. HTML5+CSS3系列课程携程网首页-移动端响应式布局实战之微加建 ...
双飞翼HTML圣杯布局,Web前端：CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
HTML自定义三栏,HTML+CSS三栏式布局（7种）
1.float(脱离文本流) css部分代码: html: 效果: 特点:左右两栏利用中间的margin挤出空间,左侧向左浮动,右侧向右浮动,中间不设置宽度,随着屏幕的缩小,左右两栏的宽度会保持不变, ...
双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解
html> 圣杯布局 *{margin: 0; padding: 0;} body{width: 100%; margin: 0 auto; height: 800px;} .middle,.l ...

【三栏式布局、双飞翼布局、圣杯布局】09

三栏式布局

文章目录

1. 用calc函数实现三栏式布局

2. 双飞翼布局

3. 圣杯布局

【三栏式布局、双飞翼布局、圣杯布局】09相关推荐

最新文章

热门文章