双飞翼布局实现
布局实现的目的
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）