如何讓浮動層加margin后不換行_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
給客戶做站的時候遇到的問題,div層加了margin后 總寬度超過父級層寬度 就自動換行了 如何讓浮動層加margin后不換行呢?
下面看浮動層加margin后換行的例子:
比如說有個DIV寬度為380px,它里面有一個菜單列表,每個寬度為60px,margin-right為20px。如果就按照下面的HTML結構來做的話,那么這個菜單列表能在這個DIV里一行顯示完整嗎?
- <div>
- <div>mb5u1</div>
- <div>mb5u2</div>
- <div>mb5u3</div>
- <div>mb5u4</div>
- <div>mb5u5</div>
- </div>
5個菜單,每個寬度為60px,右邊外補白為20px,因此每個菜單整體寬度是80px,5個菜單總長度為400px,而父級層寬度只有380px,根據浮動的原理,那么第5個菜單將毫無疑問的被擠下去即換行了。
看下我的解決方法:
代碼如下:
- <div>
- <div class="overflowDiv">
- <div>mb5u1</div>
- <div>mb5u2</div>
- <div>mb5u3</div>
- <div>mb5u4</div>
- <div>mb5u5</div>
- </div>
- </div>
父級層寬度380px,遮罩層overflowDiv寬度設置為菜單需要的400px,overflow為hidden。因此,很自然的,遮罩層多出的20像素部分則不會顯示出來。
而菜單就在這400px的寬度里為所欲為了。
如果各位朋友有更好的辦法,希望能在評論中留言告訴我哦。
相關Div+CSS教程:
- 相關鏈接:
- 教程說明:
Div+CSS教程-如何讓浮動層加margin后不換行。