双飞翼布局实现
布局实现的目的
1.三列布局,两端固定宽度(其实可以不用固定宽度),中间栏自适应。
2.中间栏优先渲染。
3.任意栏高度自由不限制
实现原理:
html代码中,content部分首先要放在container的最前部分,然后是left,right.
1.将三者都设置 float:left
2.content设置 width:100% 占满一行.
3.此时content占满一行,所以要把left放到content所在行的最左边,使用 margin-left:-100%;(content的宽度)
right放到最右边,margin-left:-300px;(right自身的宽度)
4.这时left回到content所在行的最左边,right回到content所在行的最右边,但会覆盖content内容的左右端,要把content内容挤到中间,所以在content下面添加一个div子元素,margin:0px;400px;
初始代码:
<!-- 三列布局,中间宽度自适应,两边定宽 中间栏要在浏览器中优先展示渲染 允许任意列的高度最高 --> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>双飞翼布局实现</title> <style> .container { border: 2px solid #0000ff; width: 1000px; overflow: hidden; } .content { background: red; float: left; } .left { background: green; float: left; width: 200px; } .right { background: pink; float: left; width: 300px; } </style> </head> <body> <div class="container"> <div class="content">中间</div> <div class="left">左边</div> <div class="right">右边</div> </div> </body> </html>
中间被挤压了,给centent加一个width:100%,但是这时候出现了二行,当一个父元素宽度无法支撑一行的时候,它会换行.
飞翼模型成型了,现在要做的就是把left、right移上去到两边就好了
- 添加left左边 margin-left: -100% 会让左边第二行继续向左边界的left继续向左移动就跳到第一行的左边
这时候我们通过IE开发者工具查看left外边距为-1000px
- 添加right右边 margin-right:-300px
因为上面我们添加了float,为了不影响布局,我们需要把right移动到第一行的尾部,而我们right的自身高为300px;所以我们向左移动-300px正好到第一行的尾部.
这时候会发现中间被挡住了怎么办了? left和right只是跑到content图层的上一层,遮挡住了content的内容,而不是排挤了content的内容。添加div子元素就可以看见被遮挡的内容.
- 在原来的content下面添加一个div元素conter 修改外间距上下为0px,左右为400px;这时候我们看下效果
- 中间二字就出来了,而且达到了我们想要的效果 我们通过开发者工具查看.
- 我们增大宽度为1200px;这时候你会发现二边羽翼不变,中间随着宽度的增大而增大,实现的双飞羽翼布局的效果。
完整代码:
<!-- 三列布局,中间宽度自适应,两边定宽 中间栏要在浏览器中优先展示渲染 允许任意列的高度最高 --> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>双飞翼布局实现</title> <style> .container { border: 2px solid #0000ff; width: 1000px; overflow: hidden; } .content { background: red; float: left; width: 100%; } .left { background: green; float: left; width: 200px; margin-left: -100%; } .right { background: pink; float: left; width: 300px; margin-left: -300px; } .center { margin: 0px 400px; } </style> </head> <body> <div class="container"> <div class="content"> <div class="center">中间</div> </div> <div class="left">左边</div> <div class="right">右边</div> </div> </body> </html>
- 点赞
- 收藏
- 关注作者
评论(0)