PTT數位生活區 / Web_Design

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

看板Web_Design作者 (屁屁)時間8年前 (2017/04/30 22:20), 8年前編輯推噓3(3推 0噓 7→)
留言10則, 5人參與, 最新討論串1/1
小弟自己在家看影片自學寫網頁,目前在切版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
→
04/30 22:34, , 1F
inline-block左右兩段div換行的話，有空白產生，註解掉
04/30 22:34, 1F
→
05/01 12:26, , 2F
推樓上，或是用 float:left + clearfix 來解
05/01 12:26, 2F
推
05/01 13:52, , 3F
用flex寫： .bottom { height: 400px; display: flex; }
05/01 13:52, 3F
→
05/01 13:53, , 4F
.right, .left { height: 100px; flex-grow: 1; }
05/01 13:53, 4F
重新看了影片,發現盲點: 把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
推
05/02 16:23, , 5F
你搜"inline-block space"
05/02 16:23, 5F
→
05/02 16:25, , 6F
翻成白話是..inline-block的元素跟元素間會有間隙
05/02 16:25, 6F
→
05/02 16:27, , 7F
他用了一些小技巧去處理,類似的技巧有好幾個,有些人
05/02 16:27, 7F
→
05/02 16:28, , 8F
直接用其他種排版方式去處理,因為inline-block其實跟
05/02 16:28, 8F
→
05/02 16:29, , 9F
一般人直覺反應預期的行為不一樣,多了間隙
05/02 16:29, 9F
推
05/15 17:05, , 10F
那個間隙真的很討厭，如果你是排版魔人的話
05/15 17:05, 10F
‣ 更多 PP68 的文章
文章代碼(AID): #1P1VAoxo (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 PP68 的文章
文章代碼(AID): #1P1VAoxo (Web_Design)