作者PP68 (屁屁)
看板Web_Design
標題[問題] box-sizing:border-box沒反應
時間Sun Apr 30 22:20:31 2017
小弟自己在家看影片自學寫網頁,目前在切版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://webptt.com/m.aspx?n=bbs/Web_Design/M.1493562034.A.EF2.html
1F：→ Uzen: inline-block左右兩段div換行的話，有空白產生，註解掉 04/30 22:34
2F：→ meteorboy: 推樓上，或是用 float:left + clearfix 來解 05/01 12:26
3F：推 Kenqr: 用flex寫： .bottom { height: 400px; display: flex; } 05/01 13:52
4F：→ 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
5F：推 iamnodoubt: 你搜"inline-block space" 05/02 16:23
6F：→ iamnodoubt: 翻成白話是..inline-block的元素跟元素間會有間隙 05/02 16:25
7F：→ iamnodoubt: 他用了一些小技巧去處理,類似的技巧有好幾個,有些人 05/02 16:27
8F：→ iamnodoubt: 直接用其他種排版方式去處理,因為inline-block其實跟 05/02 16:28
9F：→ iamnodoubt: 一般人直覺反應預期的行為不一樣,多了間隙 05/02 16:29
10F：推 sycc: 那個間隙真的很討厭，如果你是排版魔人的話 05/15 17:05