div自适应宽度
对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，好比三栏布局居中的一栏为自适应宽度，就能够这样来定义三栏div：布局
<div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:100px;">这是右栏</div> <div id="center" style="float:none;width:auto;">这是中栏，且自适应宽度</div>
效果以下：spa
可是若是咱们增长中栏的文字内容，而且为其添加边框和背景色，就会发现问题了：code
<div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:100px;">这是右栏</div> <div id="center" style="float:none;width:auto;background-color:#dddddd;border:1px solid #999999;">这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。</div>
其结果以下：blog
能够看到，中栏仅有高度小于左右两栏的那部份内容才会自适应宽度，超出左右两栏的高度，就不受控制了，且其真实的宽度仍然是100%，这能够从背景和边框看出来。class
不过既然它能容许浮动的两栏在其左右，并与左右两栏相安无事，就有了另外一个解决方案，即指定中栏的左右外边距，觉得两个侧栏留出位置，而自身内容没必要担忧会因为超出左右栏高度而失控。float
代码以下：自适应
<div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:100px;">这是右栏</div> <div id="center" style="float:none;width:auto;margin:0 100px;background-color:#dddddd;border:1px solid #999999;"> 这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。 </div>
截图以下：im
也能够使用padding（内边距）来实现相同效果，可是须要在中栏中再增长一个子div，为其指定边框和背景，代码以下：margin
<div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:100px;">这是右栏</div> <div id="center" style="float:none;width:auto;padding:0 100px;"> <div id="inner" style="background-color:#dddddd;border:1px solid #999999;"> 这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。 </div> </div>
效果以下：img