javascript - 關于圣杯布局的一點疑惑

問題描述

這是一個標準的圣杯布局 這是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

問題解答

網頁元素 按照html的書寫順序 根據流動模型來分布。這里的left元素因為沒有了位置流動到了下一行，現在設置margin-left為負的自己的寬度，相當于不占位置，所以流動到了第一行的最后。隨著margin-left負值的增大會慢慢向左位移。

設置margin-left：-100%; // 相當于父元素寬度的100%這時left元素就會來到第一行的最左邊了。