HTML
<div class="outer height199"> <p>This container has a height of 199px and width of 199px</p> <div class="inner">img</div> <div class="inner2">img</div> </div> <div class="outer height200"> <p>This container has a height of 200px and width of 200px</p> <div class="inner">img</div> <div class="inner2">img</div> </div>
CSS
.outer{ width:200px; background:red; margin:10px; position:relative; float:left; display:inline;/* ie double margin fix*/ } .height199{height:199px;width:199px;} .height200{height:200px;width:200px} .height201{height:201px;width:201px;} .height202{height:202px;width:202px;} .height203{height:203px;width:203px;} .height204{height:204px;width:204px;} .height205{height:205px;width:205px} .inner,.inner2{ width:30px; height:30px; position:absolute; background:blue; } .inner{ bottom:0; left:0; } .inner2{ top:0; right:0; } p{clear:both;margin:0 40px 1em 5px}
可以看出在奇数容器下出现了1px 间距,而在偶数容器下正常。
不完美的解决方法:改变结构并使用浮动
HTML
<div class="fix"> <div class="outer height199"> <div class="inner2">img</div> <p>This container has a height of 199px</p> </div> <div class="inner">img</div> </div> <div class="fix"> <div class="outer height200"> <div class="inner2">img</div> <p>This container has a height of 200px</p> </div> <div class="inner">img</div> </div>CSS
.fix { width:200px; margin:10px; position:relative; float:left; display:inline;/* ie double margin fix*/ } .fix .outer{margin:0} .fix .inner{ clear:both; margin-top:-30px; position:relative; float:left; } .fix .inner2{float:right;position:static}