html結構:<div id="left"></div>
<div id="right"></div>css代碼:* { box-sizing: border-box;
}#left, #right { display: inline-block; vertical-align: top;
}#left { width: calc(100% - 205px);
/* don't know why additional 5px? */}#right { width: 200px;
}demo:https://codepen.io/anon/pen/N...一個簡單的兩欄布局,使用calc()動態計算左邊欄的width來為右邊欄預留空間。按照我的理解,#right是200px,中間沒有其他內容,左欄width應該calc(100% - 200px)就足夠了,但是實際測試發現,右欄會被擠到下一行,而至少需要calc(100% - 205px)才能保證兩欄在同一水平線,多出來的5px在哪里被占據了?在chrome、IE11測試均如此
- 0 回答
- 0 關注
- 754 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消