[問題] box-sizing:border-box沒反應

[PP68 (屁屁)]

小弟自己在家看影片自學寫網頁,目前在切版1分2時碰到個問題。

先附上code:https://codepen.io/iampp0608/pen/Wjjoyv?editors=1100

看影片裡在最後補上box-sizing : border-box;

下方兩個div就會從上下兩層變成左右並排,不過我加進去之後倒是都沒改變,要把width改
成48%或49%才會有反應,只是就會變得很不工整,兩個div會有留白。

蠢問題還請麻煩各位指導,謝謝!

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.246.123.102
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1493562034.A.EF2.html
→ Uzen: inline-block左右兩段div換行的話，有空白產生，註解掉
→ meteorboy: 推樓上，或是用 float:left + clearfix 來解
推 Kenqr: 用flex寫： .bottom { height: 400px; display: flex; }
→ Kenqr: .right, .left { height: 100px; flex-grow: 1; }
重新看了影片,發現盲點:
把html那邊

從

<div class="bottom">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

改為

<div class="bottom">
  <div class="left">left
  </div><div class="right">right</div>
</div>

結果就成功分成左右兩邊了,雖然不太懂為什麼...
※ 編輯: PP68 (111.246.123.102), 05/01/2017 21:17:12
推 iamnodoubt: 你搜"inline-block space"
→ iamnodoubt: 翻成白話是..inline-block的元素跟元素間會有間隙
→ iamnodoubt: 他用了一些小技巧去處理,類似的技巧有好幾個,有些人
→ iamnodoubt: 直接用其他種排版方式去處理,因為inline-block其實跟
→ iamnodoubt: 一般人直覺反應預期的行為不一樣,多了間隙
推 sycc: 那個間隙真的很討厭，如果你是排版魔人的話