圣杯布局的定义应该是一个header,一个footer,中间是container,包含一个自适应宽度的center,center左边和右边各有一个宽度确定的div,大概是这样
(1)使用普通的css来表现
首先是基本的html代码
<div id="header">header</div>
<div id="parent">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
然后我们简单地定义header和footer,赋予其高度和背景颜色,顺便clear:both
#header,#footer{
background-color: darkgray;
width: 100%;
height: 50px;
clear: both;
}
然后我们定义center left right的宽高背景颜色,同时设置他们向左浮动,并且设置parent的padding-left为left的宽度,padding-right为right的宽度
#parent{
padding-left: 60px;
padding-right: 40px;
background-color: #EEE;
}
#left, #right, #middle{
float: left;
}
#left{
width:60px;
background-color: yellow;
height: 100px;
}
#right{
width: 40px;
background-color: dodgerblue;
height: 100px;
}
#middle{
background-color: orange;
height: 110px;
width: 100%;
}
这时候的效果是
现在我们想要这个left,能出现在middle的左边,我们可以使用margin-left: -100%,这时候百分比的分母是父元素的宽度,由于父元素的middle撑起来的,所以刚好是middle的宽度,此时left会叠加在middle上面
这时候我们想让他往左贴,可以使用postion:relative定位,然后左移一个自己的宽度,left:-60px;
举一反三,如果希望right也出现在上面,我们可以显然right在middle里面,然后利用position移动出来.先使用margin-left:-40px,之后position:relative; left: 40px;当当当,完成了!
代码如下:
<style>
#parent{
padding-left: 60px;
padding-right: 40px;
background-color: #EEE;
}
#left, #right, #middle{
float: left;
}
#left{
width:60px;
background-color: yellow;
height: 100px;
margin-left: -100%;
position: relative;
left: -60px;
}
#right{
width: 40px;
background-color: dodgerblue;
height: 100px;
margin-left: -40px;
position: relative;
left: 40px;
}
#middle{
background-color: orange;
height: 110px;
width: 100%;
}
#header,#footer{
background-color: darkgray;
width: 100%;
height: 50px;
clear: both;
}
</style>
(2)利用flex布局来实习
父元素使用display:flex;子元素使用order控制顺序,对center使用flex:1;使得center尽可能撑满父元素,over
<style>
#parent{
background-color: #EEE;
display: flex;
}
#left{
width:60px;
background-color: yellow;
height: 100px;
order: 0;
}
#right{
width: 40px;
background-color: dodgerblue;
height: 100px;
order: 2;
}
#middle{
background-color: orange;
height: 110px;
width: 100%;
flex: 1;
order: 1;
}
#header,#footer{
background-color: darkgray;
width: 100%;
height: 50px;
clear: both;
}
</style>