css div自适应宽度实例

当内容超出父级元素宽度，在未设置white-space:nowrap时会自动换行，设置了white-space:nowrap样式又不能关联到滚动条延伸的部分，解决方案如下：

      1、在父级元素添加white-space:nowrap属性；

      2、计算（每一行）内容宽度；

           a、将内容拆分，包括缩进、图片和文字。

           b、利用《又谈换行情况处理》中在body末尾添加非换行dom元素计算文字宽度。

           c、叠加拆分的小块宽度为总宽度。

      3、去掉父级元素的white-space:nowrap属性；

      4、取2中最大宽度，设置成父级元素的宽度（最好在该精确宽度的基础上增加6px-8px的宽度预留给滚动条，一是满足滚动条出现，二是也不会贴边）。

      该方法优点（与之前几种方案相比）：

      1、宽度计算准确。

      2、性能稳定，没有之前循环“试探”的过程，遍历一遍节点即可完成。

现在看个实例

从代码里你丝毫看不出为什么这样会自适应宽度，这就是本段代码的微秒之处，希望你认真阅读一下，探个究竟。答案是inline-block。

实例1