本文和大家重點(diǎn)討論一下DIV層加margin后寬度超過父層自動(dòng)換行的解決方法，相信通過本文的實(shí)例講解你對DIV層加margin后寬度超過父層自動(dòng)換行的問題一定會(huì)有深刻的認(rèn)識(shí)，請看下文詳細(xì)介紹。

DIV層加margin后寬度超過父層自動(dòng)換行的解決方法

下面看浮動(dòng)層加margin后換行的例子:

比如說有個(gè)DIV寬度為380px，它里面有一個(gè)菜單列表，每個(gè)寬度為60px，margin-right為20px。如果就按照下面的HTML結(jié)構(gòu)來做的話，那么這個(gè)菜單列表能在這個(gè)DIV里一行顯示完整嗎？

<DIV> 
<DIV>winhd1</DIV> 
<DIV>winhd2</DIV> 
<DIV>winhd3</DIV> 
<DIV>winhd4</DIV> 
<DIV>winhd5</DIV> 
</DIV> 
 

5個(gè)菜單，每個(gè)寬度為60px，右邊外補(bǔ)白為20px，因此每個(gè)菜單整體寬度是80px，5個(gè)菜單總長度為400px，而父級(jí)層寬度只有380px，根據(jù)浮動(dòng)的原理，那么第5個(gè)菜單將毫無疑問的被擠下去即換行了。

◆看下面的解決方法:

代碼如下:

<DIV> 
<DIVclassDIVclass="overflowDIV"> 
<DIV>winhd1</DIV> 
<DIV>winhd2</DIV> 
<DIV>winhd3</DIV> 
<DIV>winhd4</DIV> 
<DIV>winhd5</DIV> 
</DIV> 
</DIV> 
 

 父級(jí)層寬度380px，遮罩層overflowDIV寬度設(shè)置為菜單需要的400px,overflow為hidden。因此，很自然的，遮罩層多出的20像素部分則不會(huì)顯示出來。而菜單就在這400px的寬度里為所欲為了。
 

【編輯推薦】

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