双飞翼布局和圣杯布局的对比

双飞翼布局是圣杯布局的升级,但是双飞翼布局没有使用相对定位,实现方法是在圣杯布局的基础上新建一个div,只用浮动和负边距就可以实现双飞翼布局。

html

布局步骤:

  1. 三者都设置向左浮动
  2. 设置main-warp宽度为100%,设置两个侧栏的宽度
  3. 设置负边距,sub的负边距设置为100%,extra的负边距设置为自身宽度
  4. 设置main的margin值为左右两个侧栏的宽度

css

.main-wrap{
float:left;
width:100%;
}
.mian{
margin:0 230px 0 190px;
}
.sub{
float:left;
width:190px;
margin-left:-100%;
}
.extra{
float:left;
width:230px;
margin-left:-230px;
}

end

一盏灯, 一片昏黄; 一, 一杯淡茶。 守着那一份淡定, 品读属于自己的寂寞。 保持淡定, 才能欣赏到最美丽的风景! 保持淡定, 人生从此不再寂寞。

你可能感兴趣的:(双飞翼布局和圣杯布局的对比)