javascript - 三栏式用双飞翼和圣杯布局的时候为什么左边的模块-margin-left:100%会跑到左上方
本文介绍了javascript - 三栏式用双飞翼和圣杯布局的时候为什么左边的模块-margin-left:100%会跑到左上方的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
就是不太能理解左栏负边距100%会跑到第一行左边的原理 。自己写了确实是这个效果 希望能有大神通俗易懂的解释下原理
dom结构如下:
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
相对应的CSS内容如下:
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
</style>
解决方案
left元素的设置了 margin-left:-100%;
,按规范所述,浮动元素要尽可能向上浮动。
100%就是bd的宽度,bd比left宽,因此left相当于不占空间,理论上可以放在和bd一行而不是另起一行,然后按规则就放上去了。
right在右边是因为 margin-left:-200px;
这值比 margin-left:-100%;
小,你给右边设 margin-left:-110%;
(取消relative的负值定位)看看
这篇关于javascript - 三栏式用双飞翼和圣杯布局的时候为什么左边的模块-margin-left:100%会跑到左上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文