本文和大家重點討論一下DIV層加margin后寬度超過父層自動換行的解決方法，相信通過本文的實例講解你對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，根據浮動的原理，那么第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的寬度里為所欲為了。
 

【編輯推薦】

1. DIV+CSS布局網站的六大優點
2. CSS屬性選擇器語法詳解
3. CSS中DIV彈出層問題解決方案
4. 七大CSS選擇符用法詳解
5. 探究CSS高級語法中選擇器分組和CSS繼承用法