溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關DIV層加入margin后的異常怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
DIV層加margin后寬度超過父層自動換行的解決方法
下面看浮動層加margin后換行的例子:
比如說有個DIV寬度為380px，它里面有一個菜單列表，每個寬度為60px，margin-right為20px。如果就按照下面的HTML結構來做的話，那么這個菜單列表能在這個DIV里一行顯示完整嗎？
<DIV> <DIV>winhd1</DIV> <DIV>winhd2</DIV> <DIV>winhd3</DIV> <DIV>winhd4</DIV> <DIV>winhd5</DIV> </DIV>
5個菜單，每個寬度為60px，右邊外補白為20px，因此每個菜單整體寬度是80px，5個菜單總長度為400px，而父級層寬度只有380px，根據(jù)浮動的原理，那么第5個菜單將毫無疑問的被擠下去即換行了。
◆看下面的解決方法:
代碼如下:
<DIV> <DIVclassDIVclass="overflowDIV"> <DIV>winhd1</DIV> <DIV>winhd2</DIV> <DIV>winhd3</DIV> <DIV>winhd4</DIV> <DIV>winhd5</DIV> </DIV> </DIV>
父級層寬度380px，遮罩層overflowDIV寬度設置為菜單需要的400px,overflow為hidden。因此，很自然的，遮罩層多出的20像素部分則不會顯示出來。而菜單就在這400px的寬度里為所欲為了。
關于“DIV層加入margin后的異常怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
