inline-block 元素無法漂亮擺好的問題

我想練習這個效果
http://zh-tw.learnlayout.com/inline-block-layout.html

但卡在寬度設百分比的地方,做出來的結果如下
https://jsfiddle.net/xrL0fcp5/


CSS裡的dis1、dis2,我用width:40%、60%時
右邊60%的表格好像進不去框框裡,會自動換行
但若用40%、59%就進得去!只是這樣會有縫隙

改用200px、300px也是這個狀況
用200px、296px就可以,只是一樣有縫隙
想請問我的問題在哪裡呢冏?

ps.
除個container以外
另外三個框我用了box-sizing:border-box;
所以框線應該不會影響吧?

發問時間:2016-08-27 12:10
阿川先生
54

此問題由我Email轉錄至此。得到回答後將轉貼給原發問者 – 阿川先生 12:20
新增推文
發問注意事項
  • 一次問一個問題。多個問題請分多次發問
  • 請盡量清楚描述您的問題
  • 請描述您做過哪些嘗試、試過哪些方法
  • 請盡可能地提供細節,幫回答者節省時間

1 個回答

0
應該是 inline-block 會產生空白間隙,至於為什麼 box-sizing:border-box; 無效我沒查到原因。

解決方式:
1. 改用 float: left;
2. 在 .dis2 加上一行 margin-right: -4px; //右側加上負Margin

----
參考來源:黑暗執行緒,http://blog.darkthread.net/post-2014-11-01-inline-block-redundant-space.aspx

回答時間:2016-08-27 14:29
cherng
14

新增推文