切版常見問題
區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來
.container
.a width 70%
.b height 30%
.container
width: 300px
height: 100px
border: 1px solid #90a955
.a,.b
border: 1px solid #90a955
height: 100%
background-color: rgba(193, 215, 174, 0.3)
.a
width: 70%
.b
width: 30%
Display
width 70%
height 30%
解決方法
- 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
- display: inline-block,元素水平排列。
詳細請看這篇文章 - box-sizing: border-box→外框框線尺寸包在框元素之内。
詳細請看這篇文章
.container
width: 300px
height: 100px
border: 1px solid #90a955
// 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
font-size: 0px
.a,.b
border: 1px solid #90a955
height: 100%
background-color: rgba(193, 215, 174, 0.3)
font-size: 18.4px
// 3 外框框線尺寸包在框元素之内
box-sizing: border-box
// 2 元素水平排列
display: inline-block
.a
width: 70%
.b
width: 30%
Display
width 70%
height 30%