css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应!
看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也没什么问题,但是html中div的顺序却是
<div class = "left"></div>
<div class = "right"></div>
<div class = "main"></div>
(就用class名字来代表它的位置)通常我们的主体内容是放在main里面的,但是在html的顺序中确是最后加载,因为如果最先加载main,main占据整行下面的left,right就不会自己浮动上去,所以这样肯定是不完美的!
所以接下来我们介绍的两种方式就是完美的实现这种布局,让main最先加载,而且完美的解决兼容性问题。
第一种叫做圣杯布局:
思路是main left right全部float:left,这样,main就会不再具有块级元素的特性main的宽度设置100%同时,此时给left设置一个margin-left:-100%,给right设置一个margin-right:-它自身的宽度,这样我们就硬性的把它们放到了一行上,但是实际上此时left和right是覆盖在了main的两边,这样肯定是不行的!因为会遮盖一些我门想要展示的东西!所以我们还需要做一些事情。这里有两种方法第一种是将main的box-sizing变成border-box,然后直接给main设置padding,padding-left和padding-right分别是两边定宽元素的宽度,我们做的首先是改变盒模型这样加padding后不会改变自己在浏览器中占的位置,然后在设置padding就可以了,但是box-sizing这个属性是css3的属性,所以兼容性没有那么好,如果你对兼容性的要求没有那么高,这是一种很好的选择!如果你对兼容性要求比较严格,那么就需要用到我们的第二种方法:首先我们得我们的 main left right加一个父盒子,为父盒子设置padding,然后再为left right分别设置为相对定位,然后设置一个margin的负值就达到了目的!这样是不是豁然开朗,原理其实很简单,下面是我们的css代码:
.box{
padding: 0 200px;
}
.middle{
width: 100%;
background: pink;
height: 200px;
float: left;
}
.left{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -200px;
position: relative;
right: -200px;
}
html:
<div class = "box">
<div class = "middle">11</div>
<div class = "left"></div>
<div class = "right"></div>
</div>
我把设置box-sizing的代码也放在这儿,大家可以参考!
*{
box-sizing: border-box;
}
.middle{
width: 100%;
background: pink;
height: 200px;
float: left;
padding: 0 200px;
}
.left{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: skyblue;
margin-left: -200px;
}
下面是我们要说的第二种方式:双飞翼布局(名字都不是我起的)
如果你好好看过上一种布局的原理,这个理解起来就很快了!它首先也需要把main left right硬性的放在同一行,不过是换了一种让main内容全部显示的方法,方法就是在main的内部,加一个div,这个div设置一个margin,left rigth的值分别是margin-left和margin-right的值!这样真正要显示的内容实际放在middle>div里!是不是很好理解。
两个原理都明白了之后,双飞翼和圣杯的区别也显而易见!他们都可以完美的实现布局,解决兼容性的问题,但是双飞翼所需的代码明显比圣杯的少,而且思路更加简单一点,所有略胜一筹,实际上双飞翼就是圣杯的优化!青出于蓝而胜于蓝是很正常的事情!
下面是双飞翼布局的代码!大家参考一下
css:
.middle{
width: 100%;
height: 200px;
float: left;
background: skyblue;
}
.middle>div{
margin:0 100px;
}
.left{
width: 100px;
float:left;
height: 200px;
background: pink;
margin-left: -100%;
} .right{
margin-left:-100px;
width: 100px;
float:left;
height: 200px;
background: pink;
}
html
<div class = "middle">
<div></div>
</div>
<div class = "left"></div>
<div class = "right"></div>
最终效果图!二者是一样的
手打博客,转发要注明噢!
css三列布局之双飞翼pk圣杯的更多相关文章
- CSS三列布局之左右宽度固定,中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- css 三列布局
前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)
demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...
- CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
随机推荐
- Jquery判断$("#id")获取的对象是否存在
一.判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 代码如下: if($("#id")){ }else{} 因为 $(“#id”) 不管 ...
- js中各种弹窗
** * JS提示跳转 * @param $tip 弹窗口提示信息(为空没有提示) * @param $type 设置类型 close = 关闭 ,back=返回 ,refresh=提示重载,j ...
- Python3实现自动点赞抖音小姐姐
什么是抖音 抖音是2016年9月上线的一款音乐创意短视频社交软件,是一个专注年轻人的15秒音乐短视频社区.用户可以通过这款软件选择歌曲,拍摄15秒的音乐短视频,形成自己的作品. 效果 抖音经常能刷到很 ...
- JavaScript数组方法--flat、forEach、map
今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...
- Laragon+PHP7中开启xdebug
状态 :laragon+php7.2,按管方做法要求用的是xdebug2.7.结果2.7版本放进去一打断点就挂了,于是换成2.6的版本, php.ini中配置如下: [Xdebug] zend_ext ...
- 彻底搞懂Scrapy的中间件(二)
在上一篇文章中介绍了下载器中间件的一些简单应用,现在再来通过案例说说如何使用下载器中间件集成Selenium.重试和处理请求异常. 在中间件中集成Selenium 对于一些很麻烦的异步加载页面,手动寻 ...
- mysql创建用户并分配权限
添加新用户 允许本地 IP 访问 localhost, 127.0.0.1 create user 'test'@'localhost' identified by '123456'; 允许外网 IP ...
- Docker 多主机方案
利用OpenVSwitch构建多主机Docker网络 [编者的话]当你在一台主机上成功运行Docker容器后,信心满满地打算将其扩展到多台主机时,却发现前面的尝试只相当于写了个Hello World的 ...
- Javascript 京东轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- gitlab api 使用
api文档:https://docs.gitlab.com/ee/api/projects.html#project-visibility-level 1.项目查询 http://127.0.0.1: ...