試問以下兩個code出來的結果有何不同:
old.html
<div style="width: 1000px;height: 500px;">
<div style="float: left;width:70%;height:100%;background: #145"></div>
<div style="float: left;width:30%;height:100%;background: #222"></div>
</div>
bug.html
<div style="width: 1000px;height: 500px;">
<div style="display: inline-block; width:70%;height:100%;background: #145"></div>
<div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>
你會發現bug.html怎麼樣都沒辦法把底下兩個div正確地塞進上層的div裡,
bug.html底下兩個div中間會多出一條莫名其妙的空白線,但你用chrome/firefox inspector怎麼看兩個div的padding/border/margin 都找不到那條空白線到底是哪裡來的。
==========無用防雷線=============
解答:
inline-block對外層來說兩個div排列是inline所以那個白線來自html排版中的空白text node,你需要把兩個div間的空白完全拿掉才能成功排列:
<div style="width: 1000px;height: 500px;">
<div style="display: inline-block; width:70%;height:100%;background: #145"></div><div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>
<div style="display: inline-block; width:70%;height:100%;background: #145"></div><div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>