文章詳情頁(yè)
javascript - 關(guān)于圣杯布局的一點(diǎn)疑惑
瀏覽:228日期:2023-03-09 18:25:39
問(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)題解答
回答1:網(wǎng)頁(yè)元素 按照html的書(shū)寫順序 根據(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)到第一行的最左邊了。
標(biāo)簽:
JavaScript
上一條:javascript - 回調(diào)函數(shù)和閉包的關(guān)系下一條:javascript - 求教:如何從頁(yè)面1鏈接到頁(yè)面2時(shí),使頁(yè)面2原本隱藏的div顯示?
相關(guān)文章:
1. html5 - ElementUI table中el-table-column怎么設(shè)置百分比顯示。2. python - 使用readlines()方法讀取文件內(nèi)容后,再用for循環(huán)遍歷文件與變量匹配時(shí)出現(xiàn)疑難?3. 對(duì)mysql某個(gè)字段監(jiān)控的功能4. css3 - less或者scss 顏色計(jì)算的知識(shí)應(yīng)該怎么學(xué)?或者在哪里學(xué)?5. 注冊(cè)賬戶文字不能左右分離6. javascript - table列過(guò)多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網(wǎng)頁(yè)div區(qū)塊 像蘋果一樣可左右滑動(dòng) 手機(jī)與電腦8. javascript - 數(shù)組的過(guò)濾和渲染9. html - vue項(xiàng)目中用到了elementUI問(wèn)題10. JavaScript事件
排行榜

熱門標(biāo)簽