為什麼這篇box-sizing作用鄉民發文收入到精華區：因為在box-sizing作用這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者PP68 (屁屁)看板Web_Design標題[問題] box-sizing:border-bo...
小弟自己在家看影片自學寫網頁,目前在切版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換行的話，有空白產生，註解掉 04/30 22:34
→ meteorboy: 推樓上，或是用 float:left + clearfix 來解 05/01 12:26
推 Kenqr: 用flex寫： .bottom { height: 400px; display: flex; } 05/01 13:52
→ Kenqr: .right, .left { height: 100px; flex-grow: 1; } 05/01 13:53
重新看了影片,發現盲點:把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" 05/02 16:23
→ iamnodoubt: 翻成白話是..inline-block的元素跟元素間會有間隙 05/02 16:25
→ iamnodoubt: 他用了一些小技巧去處理,類似的技巧有好幾個,有些人 05/02 16:27
→ iamnodoubt: 直接用其他種排版方式去處理,因為inline-block其實跟 05/02 16:28
→ iamnodoubt: 一般人直覺反應預期的行為不一樣,多了間隙 05/02 16:29
推 sycc: 那個間隙真的很討厭，如果你是排版魔人的話 05/15 17:05