如何讓浮動層加margin后不換行_Div+CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      給客戶做站的時候遇到的問題,div層加了margin后 總寬度超過父級層寬度 就自動換行了 如何讓浮動層加margin后不換行呢?

      下面看浮動層加margin后換行的例子:

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

      1. <div> 
      2.     <div>mb5u1</div> 
      3.     <div>mb5u2</div> 
      4.     <div>mb5u3</div> 
      5.     <div>mb5u4</div> 
      6.     <div>mb5u5</div> 
      7. </div> 

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

      看下我的解決方法:

      代碼如下:

      1. <div> 
      2.     <div class="overflowDiv"> 
      3.        <div>mb5u1</div> 
      4.        <div>mb5u2</div> 
      5.        <div>mb5u3</div> 
      6.        <div>mb5u4</div> 
      7.        <div>mb5u5</div> 
      8.     </div> 
      9. </div> 


       父級層寬度380px,遮罩層overflowDiv寬度設置為菜單需要的400px,overflow為hidden。因此,很自然的,遮罩層多出的20像素部分則不會顯示出來。

      而菜單就在這400px的寬度里為所欲為了。

      如果各位朋友有更好的辦法,希望能在評論中留言告訴我哦。

      來源:模板無憂//所屬分類:Div+CSS教程/更新時間:2009-09-23
      相關Div+CSS教程