双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
圣杯布局、双飞翼布局效果图
从效果图来看圣杯布局、双飞翼布局效果是一样一样的。
圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100%
圣杯布局
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: relative;
/* 2、将.left再次拉到最左边,否则.main的左侧会有200px的空白 */
left: -200px;
float: left;
width: 200px;
min-height: 300px;
/* 1、将.left拉到最左边,原来.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
position: relative;
/* 2、将.right再次拉到最右边,否则.main的右侧会有200px的空白 */
right: -200px;
float: left;
width: 200px;
/*/1、将.right拉到最右边,原来.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
浮动实现双飞翼布局
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
float: left;
width: 200px;
min-height: 300px;
/* 将.left拉到最左边,原来.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
/* .left、.right各占了200px,因此需要将其抵消掉 */
padding: 0 200px;
background-color: #c32228;
}
.right{
float: left;
width: 200px;
/* 将.right拉到最右边,原来.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
table-cell实现双飞翼布局(IE8也兼容哦~)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
display: table;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left,
.right,
.main{
/* 外层容器使用table-cell布局,设置元素为table-cell布局后它们就能在一行显示了,display: table-cell;设置宽度无效,
因此他们的宽度由内容撑开。 */
display: table-cell;
}
.left-inner{
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
width: 100%;
}
.main-inner{
min-height: 300px;
background-color: #c32228;
}
.right-inner{
width: 200px;
min-height: 300px;
background-color: #f90;
}
绝对定位实现双飞翼布局
使用绝对定位实现有个小问题:父容器的高度只能由.main的高度来决定
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
min-height: 300px;
background-color: #c32228;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 200px;
min-height: 300px;
background-color: #f90;
}
使用flex实现双飞翼布局(有兼容性问题)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
display: flex;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
flex: 1;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f90;
}
相关推荐:
什么是双飞翼布局?分享一个双飞翼布局的实例代码
CSS布局 圣杯布局 & 双飞翼布局_html/css_WEB-ITnose
双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)相关推荐
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- CSS隐藏元素的十四种方法
通过设置width:0或者height:0隐藏一个元素,文字隐藏可以设置color为背景色或transparent,但内容还在,所以用font-size:0: 将元素的opacity设置为0,元素本身 ...
- php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
- CSS实现水平垂直的几种方法
title: CSS实现水平垂直的几种方法 categories: CSS tags: - CSS - HTML - 面试题 date: 2021-09-11 在HTMl中分为块级元素和内联元素, ...
- CSS粘住底部的5种方法
CSS粘住底部的5种方法 文章目录 方法一:全局增加一个负值下边距等于底部高度 方法二:底部元素增加负值上边距 方法三:使用calc()计算内容的高度 方法四:使用flexbox 方法五:使用grid ...
- 前端面试题:使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式 第一种 flex布局 第二种 绝对定位 第三种 css瀑布流 第四种 float浮动 html结构 <div class=" ...
- css如何设置透明度?设置透明度的两种方法(代码实例)
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
- css中div居中显示的四种方法
css中设置div元素居中显示的四种方法 一.先确定div的基本样式 二.具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种: ...
- css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
最新文章
- Python——cmd调用(os.system阻塞处理)(多条命令执行)
- HDU1753 大明A+B(大数相加)(Java题解)
- 见鬼了,VS2005发布站点不会把Global.asax复上。
- 基于JWT的Token认证机制实现
- NSThread创建线程的三种方法
- 使用IntelliJ IDEA和Maven管理搭建+Web+Tomcat开发环境
- redisTemplate的hscan方法中为何不需要指定游标开始地址的原因
- HIVE: 自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG?)
- Windows程序设计与C语言的主要区别是什么?
- kali系统修改中文
- 静态路由和直连路由引入配置
- pwnable tw Starbound writeup
- J2EE进阶之JSP和EL表达式 十二
- Dota 2 - Character Art Guide
- 富途最新股权曝光:腾讯持股21% 李华有67.4%投票权
- edxposed显示未安装_Magisk与EdXposed框架安装实践(Android P及以上)
- ERROR: Failed to parse XML in D:\MyAPP\XXXX\app\src\main\AndroidManifest.xml
- python or的用法_详细介绍Python中and和or实际用法
- 洛谷P3758 [TJOI2017]可乐
- 题解 P4411 【[BJWC2010]取数游戏】