CSS 實(shí)現(xiàn)div寬度根據(jù)內(nèi)容自適應(yīng)

在實(shí)際應(yīng)用中,可能有這樣的需求,那就是需要div根據(jù)內(nèi)容進(jìn)行寬度自適應(yīng)。有很多開發(fā)者可能誤以為如果不設(shè)定div的寬度就可以實(shí)現(xiàn)寬度隨內(nèi)容自適應(yīng),其實(shí)這是錯(cuò)誤的,因?yàn)樵谀J(rèn)狀態(tài)下,div的寬度值是百分之百,也就是會(huì)占滿整個(gè)父元素寬度。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
.parent{
width:400px;
height:400px;
border:1px solid red;
}
.children{
border:1px solid blue;
height:50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">歡迎來到螞蟻部落,今天陽光不錯(cuò)!</div>
</div>
</body>
</html>
以上代碼可以看出,默認(rèn)狀態(tài)下,并不能夠?qū)崿F(xiàn)我們想要的效果。
下面對(duì)以上代碼進(jìn)行修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
.parent{
width:400px;
height:400px;
border:1px solid red;
}
.children{
border:1px solid blue;
height:50px;
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">歡迎來到腳本之家,今天陽光不錯(cuò)!</div>
</div>
</body>
</html>
以上代碼實(shí)現(xiàn)我們想要的效果,并且各瀏覽器兼容性良好,主要是添加如下核心代碼:
display:inline-block;
*display:inline;
*zoom:1;
當(dāng)然內(nèi)聯(lián)元素不會(huì)存在以上麻煩,因?yàn)閮?nèi)聯(lián)元素并不能夠設(shè)置寬度,只能夠隨著內(nèi)容自適應(yīng)寬度。
以上所述給大家介紹了CSS 實(shí)現(xiàn)div寬度根據(jù)內(nèi)容自適應(yīng) 的相關(guān)知識(shí),希望對(duì)大家有所幫助。
相關(guān)文章
獨(dú)行DIV自適應(yīng)寬度布局CSS實(shí)例與應(yīng)用范圍
這篇文章主要為大家介紹了通過DIV CSS實(shí)例CSS自適應(yīng)寬度布局方法,再過常見用處介紹充分掌握自適應(yīng)獨(dú)占一行一列的布局技巧,需要的朋友可以參考下2014-10-09CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13設(shè)置DIV最小高度以及高度自適應(yīng)隨著內(nèi)容的變化而變化
希望DIV的高度會(huì)隨著內(nèi)容的變化而變化,但是又想設(shè)置DIV的一個(gè)最小高度,特別是當(dāng)DIV有背景色或背景圖片時(shí)最小高度的設(shè)置會(huì)使視覺效果更好2014-09-03