实现双飞翼布局的三种方式

使用定位来实现

实现流程：

1.父盒子相对定位，左右 padding 为子盒子宽度，左右子盒子绝对定位，宽度写死；

2.左边子盒子 left top 给 0，右边子盒子 right top 给 0；

3.中间的盒子宽度给 100%

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;position: relative;padding: 0 210px;}.box div {height: 100%;}.left {width: 200px;position: absolute;left: 0;top: 0;background-color: pink;}.center {width: 100%;background-color: green;}.right {width: 200px;position: absolute;right: 0;top: 0;background-color: yellow;}</style></head><body><div class="box"><!-- 1.父盒子相对定位，左右 padding 为子盒子宽度，左右子盒子绝对定位，宽度写死；2.左边子盒子 left top 给 0，右边子盒子 right top 给 0；3.中间的盒子宽度给 100%--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

使用浮动来实现

实现流程

1.给父盒子设置左右 padding ，距离为左右子盒子的宽度；

2.给左右盒子设置宽度，写死，左中两个盒子左浮动，右边盒子右浮动；

3.给左边盒子设置 margin-left ，右边盒子设置 margin-right，均为负值，大小为自身的宽度；

4.中间盒子宽度设置 100%

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;padding: 0 210px;}.box div {height: 100%;}.left {width: 200px;float: left;margin-left: -210px;background-color: pink;}.center {width: 100%;float: left;background-color: green;}.right {width: 200px;float: right;margin-right: -210px;background-color: yellow;}</style></head><body><div class="box"><!-- 1.给父盒子设置左右 padding ，距离为左右子盒子的宽度；2.给左右盒子设置宽度，写死，左中两个盒子 左浮动 ，右边盒子右浮动；3.给左边盒子设置 margin-left ，右边盒子设置 margin-right，均为负值，大小为自身的宽度；4.中间盒子宽度设置 100%--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

使用flex布局实现

实现流程

1.父盒子设置 display：flex，左右子盒子宽度写死；

2.中间的盒子宽度给 100% 或者 flex：1；

html结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {height: 200px;/* padding: 0 210px; */display: flex;}.box div {height: 100%;}.left {width: 200px;background-color: pink;}.center {/* width: 100%; */flex: 1;background-color: green;}.right {width: 200px;background-color: yellow;}</style></head><body><div class="box"><!-- 1.父盒子设置 display：flex，左右子盒子宽度写死；2.中间的盒子宽度给 100% 或者 flex：1；--><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

效果演示

实现双飞翼布局的三种方式相关推荐

css table设置边框_（代码示例）css实现等高布局的三种方式
本篇文章给大家带来的内容是关于css实现等高布局的三种方式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现 ...
CSS布局的三种方式
绝对定位绝对定位: 属性:position 值:absolute <style> p.abs{position: absolute;left: 150px;top: 50px; }& ...
三种方式实现圣杯布局
圣杯布局的三种实现圣杯布局是一种很常见的css布局.他要求: 上部和下部各自占领屏幕所有宽度. 上下部之间的部分是一个三栏布局. 三栏布局两侧宽度不变,中间部分自动填充整个区域. 中间部分的高度是三 ...
CSS实现三栏布局的8种方式
1.float实现三栏布局给左盒子设置float:left,给右盒子设置float:right,中间盒子设置margin-left和margin-right.需要注意的是,左右盒子要放在中间盒子之前 ...
html布局结构瀑布流,三种方式实现瀑布流布局
分别使用javascript,jquery,css实现瀑布流布局: 第一种方式:使用JavaScript: 瀑布流布局 *{padding:0;margin:0;} .clearfix:after, ...
QT读写Sqlite数据库三种方式
QT对一些基本的数据库的访问封装,可谓是极大的方便的我们开发人员,现在我们就来说下QT对Sqlite这个数据库的读写,Sqlite是一个比较小型的本地数据库,对于保存一些软件配置参数或量不是很大的数据 ...
android动态居中布局,Android动态添加布局的两种方式
释放双眼,带上耳机,听听看~! 前言大多数时候我们布局都是用xml来布局的,但有些时候也是会用到动态布局的,尤其是在一些大项目中,动态布局更是体现的淋漓尽致. 所以今天我们就来学习一些动态加添布局的 ...
centos7.4安装mysql5.7_centos7.4三种方式安装mysql5.7
三种方式安装 mysql 二进制 rpm 安装 mysql5.7.21 下载 yum repository [root@apenglinux-002 yum.repos.d]# yum -y inst ...
CSS实现多栏布局的几种方式
css实现多栏布局的几种方式假如把下面的三个div显示在同一行 <div id="parent"><div id="box1">1&l ...

实现双飞翼布局的三种方式

实现双飞翼布局的三种方式

使用定位来实现

实现流程：

html结构

使用浮动来实现

实现流程

html结构

使用flex布局实现

实现流程

html结构

效果演示

实现双飞翼布局的三种方式相关推荐

最新文章

热门文章