爱华网
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。
先说说min-height。这个看起来很容易。
用hack尽量不用。
代码如下：
<div> 最小高度</div>
经测试，预期达到。
我们想要min-width也达这样的效果。
先来测试一下：
<div> 最小宽度</div>
可是结果让我们很是意外，所有浏览器里统统失效：
全罢工啦！！仔细琢磨，原来不是这么玩的。容器的高度默认情况下是由内容多少决定的，但宽度不是啊！默认情况下是继承了父容器的宽度。当然，前提是display是block。
哦，原来是这么回事，我们得让容器的默认宽度是内容多少来决定。
由此我想到了几种情况：
1display:inline但有个问题是这样的话width就失效了,经测试min-width同样也失效，这种情况被pass掉了，海选啊！
2 于是乎我们想到display:inline-block属性；嗯这个应该没有问题吧！？动手吧
代码如下：
<div> 最小宽度& lt;/div>
经测试，firefox、chrome、ie8.0均有效。
可万恶的ie6还是不行啊！！而且出来个捣乱的，ie7也不行。别，仔细看看，原来ie6和ie7就没实现display:inline-block;
修改代码：
<div> 最小宽度</div>
先试试ie7，ok大功告成！再试ie6，依然“万恶”！！别急呀，至少我们明白了min-width的用法，当宽度由内容决定的时候才起作用。多放点内容试试，是不是如我们所想内容超出的话，容器变大？
嗯，果然是。但是有个小问题，就是当内容超过浏览器的宽度时，依然会换行。先不管它！先解决ie6.0的问题。
仔细琢磨一下，现在又回到当初的思路了，只有i6有问题。当初是怎么解决的？哦，ie6.0 的height本身就具备min-height的特性。那width是不是也如此呢？我们加个_width:220px试试
<div> 最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>
结果很严重，我们很失望。我们唯一思路也被隔断了！
<div> 最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</div>
竟然可以了！加点内容！！！
竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！
3 position:absolute 嗯这个看起来也行。
<div> 最小宽度</div>
加些内容：
依然可以，预期达到。
4 float:left 这种情况最常用。应该也行！
上代码：
<div> 最小宽度</div>
同样加些内容：
预期达到！
