css - 没有对div设置width，却显示width为100%，这是为什么？
本文介绍了css - 没有对div设置width，却显示width为100%，这是为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请看class x3-1，在这里我没有设置width，现实的效果却是100%。这是为什么？如何让width随字数自适应？
谢谢
<!doctype html>
<style>
/*默认设置*/
*{margin:0px;padding:0px;border:0px;font-size:16px;}
/*最外层框*/
.x1{width:80%;margin:0 auto;}
/*活动奖励，图片*/
.x2{margin:10px 0px;width:100%;height:32px;background:#CCCC66;}
.x2-1{margin:0 auto;width:84px;padding:8px 0px 8px 0px;}
.x2-1-1{float:left;}
/*图片属性*/
.x2-1-1 img{width:16px;height:16px;}
/*正文*/
.x3{clear:both;}
.x3-1{
-webkit-border-radius:0px 10px 10px 0px;-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;
background:#CCCC66;padding:5px 20px;
}
.x3-2{
padding:10px 20px;
}
</style>
<body>
<div class='x1'>
<div class='x2'>
<div class='x2-1'>
<div class='x2-1-1'><img src='111.png'></div>
<div class='x2-1-1'>活动奖励</div>
</div>
</div>
<div class='x3'>
<div class='x3-1'>
第一名
</div>
<div class='x3-2'>
方法反反复复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复反复
</div>
</div>
<div class='x3'>
<div class='x3-1'>
第二名
</div>
<div class='x3-2'>
22222222222222222222222222222222222222222222222222222222222222
</div>
</div>
<div class='x3'>
<div class='x3-1'>
第三名
</div>
<div class='x3-2'>
只有汉字能自动换行，数字不行
</div>
</div>
</div>
</body>
</html>
解决方案
div是块级元素，默认的宽度就是100%
这篇关于css - 没有对div设置width，却显示width为100%，这是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
