没有对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%

一个块级元素的宽度(包括border，padding，margin)在没有显式设定的情况下，等于其包含块的内容区的宽度
在显式设置的情况下，width等于其内容区的宽度（不包括border，margin，padding）

body->div.x1->div.x3->div.x3-1

div.x1 width=80%

div.x3-1内容区的宽度为body*80%-2*20px

添加word-break: break-all可以让数字换行

.x3-2{
        padding:10px 20px;
        word-break: break-all;
        /**Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.*/
    }

一楼说的对，想让它不那么宽，加上float:left;或者display: inline;

【热门文章】