<div id="main" class="elem"> <span class="label begin"> <div id="main"> </span> <p> 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整下浏览器窗口大小检查下吧!</p> <p>顺便提下, 所有的主流浏览器包括IE7+在内都支持 max-width ,所以放心大胆的用吧。</p> <span class="label end"> </div> </span> </div>
#main { max-width: 600px; margin: 0 auto; } .elem{ border:solid #6AC5AC 3px; position:relative; } .label{ position:absolute; background-color:#6AC5AC; line-height:1em; padding:3px; } .begin{ left:0; top:0; } .end{ right:0; bottom:0; } p{ margin:2em 0; display:block; }