作者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/cn.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