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

發(fā)布時(shí)間：2016-01-28 16:05:01 作者：佚名

最近做了個(gè)項(xiàng)目，其中有項(xiàng)目需求是需要div根據(jù)內(nèi)容進(jìn)行寬度自適應(yīng)。下面小編給大家分享一段代碼關(guān)于CSS 實(shí)現(xiàn)div寬度根據(jù)內(nèi)容自適應(yīng) 的相關(guān)知識(shí)，需要的朋友參考下

在實(shí)際應(yīng)用中，可能有這樣的需求，那就是需要div根據(jù)內(nèi)容進(jìn)行寬度自適應(yīng)。有很多開(kāi)發(fā)者可能誤以為如果不設(shè)定div的寬度就可以實(shí)現(xiàn)寬度隨內(nèi)容自適應(yīng)，其實(shí)這是錯(cuò)誤的，因?yàn)樵谀J(rèn)狀態(tài)下，div的寬度值是百分之百，也就是會(huì)占滿整個(gè)父元素寬度。
代碼實(shí)例如下:

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<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">歡迎來(lái)到螞蟻部落，今天陽(yáng)光不錯(cuò)！</div>
</div>
</body>
</html>

以上代碼可以看出，默認(rèn)狀態(tài)下，并不能夠?qū)崿F(xiàn)我們想要的效果。
下面對(duì)以上代碼進(jìn)行修改如下:

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<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">歡迎來(lái)到腳本之家，今天陽(yáng)光不錯(cuò)！</div>
</div>
</body>
</html>

以上代碼實(shí)現(xiàn)我們想要的效果，并且各瀏覽器兼容性良好，主要是添加如下核心代碼:

復(fù)制代碼

代碼如下:

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ì)大家有所幫助。

Tag：css DIV 寬度內(nèi)容自適應(yīng)

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容