我們都知道,在css佈局時,在不對div設定任何樣式時,div獨佔一行預設CSS樣式為100%寬度,那麼我們這次教大家怎麼實現DIV寬度自適應但寬度從零隨內容增加而寬度增加?而非一開始即寬度全螢幕100%寬的方法
解決方法:
使用CSS float即可讓div預設100%自適應寬度變成寬從零開始自適應寬度效果。
css實作div寬度從零開始小案例
1、完整HTML+CSS程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小实例</title> <style> .case{ float:left} </style> </head> <body> <div>未设置float内容一</div> <div>未设置float内容二</div> <div class="case">加float样式的内容三</div> <div class="case">对其加float样式的内容四</div> </body> </html>
關鍵程式碼:對div加float浮動樣式,讓其寬度非100%開始,而是隨內容多少而改變,想span初始寬度一樣隨內容增加而增寬。
小結:
透過css對div設定float去掉了div預設全螢幕寬度樣式,但一般要使用這樣的從零開始自適應內容寬度的盒子,又不能使用float浮動樣式時,透過我們使用span標籤即可實現。
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
Js操作DOM物件的流程
以上是讓div寬度自適應教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!