CSS技巧，CSS设置任何元素宽度随内容增加自动变宽

宽度随内容增加自动变宽的问题，看起来简单，但网上各种找不到。

其实感觉以前在布局的时候在哪里遇到过自动变宽，想了好久好像记得只有用table布局的时候吧，但是不可能哪里都用table，如果用层那怎么办呢。

然后又发现了一个熟悉，display！！没错，就是它，很平常的一个属性，块状元素嘛，几乎天天用，居然忽略了。

<div style="display:table;"></div>

给元素加上 display:table; 就OK了。

记录一下。不用那么麻烦用 js 了。

参考于：http://www.douban.com/note/28773492/

这个链接里面讲的是浮动居中的问题，我这里解释一下

首先有三个层，

第一个层的宽度是100%，就是浏览器的整屏宽度。

第二个层向左偏离50% left:50%,

前两个都辅助层，第三个才是我们要的。

现在如果第三个层，向左偏离它自身宽度的50%，那么就OK了，可是宽度我们不知道啊，怎么办呢？

DOM元素有个继承的特性，我们知道第三个层是继承第二个层的，那么我们这样想，如果第二个层的宽度刚好是第三个层的宽度，那么第三个层用left:-50%;，不就可以了吗，所以

第三个层： left:-50%;

大概的原理就是这样。

我找到这段代码唯一的困惑点就是 第二个层怎么随着第三个层宽度变化而变化，因为div的宽度默认都是100%; 看了看代码 发现有个 display:table; 恍然大悟啊！！

所以 元素宽度随内容增加自动变宽 就是是这么来的。

今天还搜索到了 双飞翼布局。 记录下关键字