問(wèn)題描述

這是一個(gè)標(biāo)準(zhǔn)的圣杯布局 這是html代碼

<p id='hd'>header</p><p id='bd'> <p id='middle'>middle</p> <p id='left'>left</p> <p id='right'>right</p></p><p id='footer'>footer</p>

sheng.png

問(wèn)題解答

網(wǎng)頁(yè)元素 按照html的書(shū)寫(xiě)順序 根據(jù)流動(dòng)模型來(lái)分布。這里的left元素因?yàn)闆](méi)有了位置流動(dòng)到了下一行，現(xiàn)在設(shè)置margin-left為負(fù)的自己的寬度，相當(dāng)于不占位置，所以流動(dòng)到了第一行的最后。隨著margin-left負(fù)值的增大會(huì)慢慢向左位移。

設(shè)置margin-left：-100%; // 相當(dāng)于父元素寬度的100%這時(shí)left元素就會(huì)來(lái)到第一行的最左邊了。