第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

一個簡單的兩欄布局下,為另一欄預(yù)留的width需要比實際寬度大的問題

一個簡單的兩欄布局下,為另一欄預(yù)留的width需要比實際寬度大的問題

慕田峪4524236 2018-07-21 20:22:46
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測試均如此
查看完整描述

2 回答

?
浮云間

TA貢獻1829條經(jīng)驗 獲得超4個贊

<style>
    body{        font-size: 0px;
    }
    * {        box-sizing: border-box;        padding: 0;        margin: 0;
    }    #left, #right {        display: inline-block;        vertical-align: top;        font-size: 14px;
    }    #left {        width: calc(100% - 200px);        /* don't know why additional 5px? */
    }    #right {        width: 200px;
    }</style></head><body>
    <div id="left">1</div>
    <div id="right">2</div></body>


查看完整回答
反對 回復(fù) 2018-07-28
?
慕沐林林

TA貢獻2016條經(jīng)驗 獲得超9個贊

塊級元素都是有內(nèi)外邊距的。如果你不手動調(diào)沒。他就會存在。

就像樓上寫的那樣調(diào)沒就好了。

也可以引用一下初始化css,minireset.css


查看完整回答
反對 回復(fù) 2018-07-28
  • 2 回答
  • 0 關(guān)注
  • 642 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號