javascript - 关于圣杯布局的一点疑惑
本文介绍了javascript - 关于圣杯布局的一点疑惑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这是一个标准的圣杯布局 这是html代码
<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>
sheng.png
解决方案
网页元素 按照html的书写顺序 根据流动模型来分布。
这里的left元素因为没有了位置流动到了下一行,现在设置margin-left为负的自己的宽度,相当于不占位置,所以流动到了第一行的最后。
随着margin-left负值的增大会慢慢向左位移。
设置
margin-left:-100%; // 相当于父元素宽度的100%
这时left元素就会来到第一行的最左边了。
这篇关于javascript - 关于圣杯布局的一点疑惑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文