圣杯布局中的margin
div块:
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
样式:
body,html {
height: 100%;
}
#container{
height: 100%;
padding-left: 200px;
padding-right: 150px;
background-color: darkorchid;
}
#container .column {
float: left;
}
#center {
width: 100%;
height: 400px;
background-color: burlywood;
}
左右固定,中间自适应
设定margin-left时:
#left{
width: 200px;
height: 200px;
background-color: cornflowerblue;
margin-left: -100%;
}
- margin-left:100%时的情况:
- margin-left:-100%时就有:
- 于是:
#left{
width: 200px;
height: 200px;
background-color: cornflowerblue;
margin-left: -100%;
position: relative;
left: -200px;
}
- 就有:
- 同样右边有:
#right{
width: 150px;
height: 150px;
background-color: darkgreen;
margin-right: -150px;
}
-
margin-right:150px就会有:
-
margin-right:-150px就会有:
-
注意::width: 100%,是中间栏能够做到自适应的关键。需要注意到,center是浮动元素,由于浮动具有包裹性,在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%,则当中间栏不包含或者包含较少内容时,整个布局就会“崩掉”