一、
圣杯布局:利用内边距去实现内容放置。
.box{
height:300px;
padding:0 200px;
}
.center{
width:100%;
height:300px;
background:darksalmon;
float:left;
}
.left{
width:200px;
height:300px;
background-color:darkseagreen;
float:left;
margin-left:-100%;
position:relative;
left:-200px;
}
.right{
width:200px;
height:300px;
background-color:goldenrod;
float:left;
margin-left:-200px;
position: relative;
right:-200px;
}
</style>
<div class="box">
<div class="center">11111111111</div>
<div class="left"></div>
<div class="right"></div>
</div>
二、双飞翼布局:利用外边距去实现内容放置 .box{ height:300px; /* padding:0 200px; */ } .center{ width:100%; height:300px; background:darksalmon; float:left; } .left{ width:200px; height:300px; background-color:darkseagreen; float:left; margin-left:-100%; /* position:relative; left:-200px; */
}
.right{
width:200px;
height:300px;
background-color:goldenrod;
float:left;
margin-left:-200px;
/*position: relative;
right:-200px; */
}
.inner{
margin:0 200px;
}
</style>
<div class="box">
<div class="center">
<div class="inner">11111111111</div></div>
<div class="left"></div>
<div class="right"></div>
</div>
总结:
(1)双飞翼比圣杯多了一个盒子,但是避免了使用相对定位position:relative计算。
(2)两者实现时,放置内容的center盒都必须优先写在第一位。
(3)width设置为auto时,不会出现溢出现象,width设置为100%时,会出现溢出现象。
auto:
W盒模型 = 父盒子的宽度 = 有效内容宽度 + padding
100%或者px 溢出:
W盒模型 = 有效内容宽度(父盒子的宽度) + padding