讓div寬度自適應教學
- php中世界最好的语言原創
- 2017-11-29 11:46:185675瀏覽
我們都知道，在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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn