html結(jié)構(gòu):<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...點擊預(yù)覽一個簡單的兩欄布局,使用calc()動態(tài)計算左邊欄的width來為右邊欄預(yù)留空間。按照我的理解,#right是200px,中間沒有其他內(nèi)容,左欄width應(yīng)該calc(100% - 200px)就足夠了,但是實際測試發(fā)現(xiàn),右欄會被擠到下一行,而至少需要calc(100% - 205px)才能保證兩欄在同一水平線,多出來的5px在哪里被占據(jù)了?在chrome、IE11測試均如此
一個簡單的兩欄布局下,為另一欄預(yù)留的width需要比實際寬度大的問題
慕田峪4524236
2018-07-21 20:22:46