html
<div class="outer">
<div class="two"></div>
<div class="one"></div>
<div class="three"></div>
</div>
flex(两边定宽,中间自适应)
image.png body{
margin: 0;
padding: 0;
}
.outer{
height: 200px;
width: 100%;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
min-width: 400px;
}
.one,.two,.three{
height: 100%;
background: blue;
}
.one{
order: 1;
width: 200px;
}
.two{
flex: 1;
order: 2;
background: orange;
}
.three{
order: 2;
width: 200px;
}
float+position(圣杯布局)
body{
margin: 0;
padding: 0;
}
.outer{
height: 200px;
padding: 0 200px;
overflow: hidden;
}
.one,.two,.three{
float: left;
height: 100%;
background: blue;
position: relative;
}
.one{
width: 200px;
margin-left: -100%;
left: -200px;
}
.two{
width: 100%;
background: orange;
}
.three{
width: 200px;
right: -200px;
margin-left: -200px;
}
原理:
1.容器加padding:0 200px; 给左右两边腾出各200px空间;并添加overflow:hidden;取消浮动对其他元素的影响;
2.one、two、three一起设置浮动float和相对定位relative;
2.two 占满100%;
3.one margin-left:-100%,同时left:-200px,到最左边,右边同理;
image.png
image.png
注意
为什么屏幕缩小至600px以下左右会消失不见?
因为one标签的position:relative;虽然向左left移动200px;但是原来位置仍然占据着自己200px的空间大小,所以左、右再加200px为600px;页面最小不能缩小至600px,否则会出现坍塌,可以给outer设置min-width:200px; 因为还有400px的padding大小,最小宽总共600px;或者直接给body 最小宽600px;
float(双飞翼布局)
html
<div class="outer">
<div class="two"><span class="two-inner">说法士大夫撒发生大哥仨干撒公司的公司的工时费刚发的广泛地</span></div>
<div class="one">啊所发生的好好读书的故事的功夫大使馆说的</div>
<div class="three">是的公司的轨道上的给第三个第四个梵蒂冈</div>
</div>
body{
margin: 0;
padding: 0;
min-width: 400px;
}
.outer{
height: 200px;
overflow: hidden;
}
.one,.two,.three{
float: left;
height: 100%;
background: blue;
}
.one{
width: 200px;
margin-left: -100%;
}
.two{
width: 100%;
background: orange;
}
.two>.two-inner{
display: inline-block;
padding: 0 200px;
}
.three{
width: 200px;
margin-left: -200px;
}
注意
特点是在two中加入子标签,并设置padding:0 200px;给左右腾出200px的空间大小;是圣杯布局的优化版,且最小宽度等于左右的宽度,即400px;
网友评论