亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

<button id="riog3"></button>

<rp id="riog3"><ins id="riog3"><delect id="riog3"></delect></ins></rp><form id="riog3"></form>

已解決430363個問題，去搜搜看，總會有你想問的

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

關注

首頁猿問一個簡單的兩欄布局下，為另一欄預留...

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

Html/CSS

慕田峪4524236 2018-07-21 20:22:46

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測試均如此

查看完整描述

2 回答

浮云間

TA貢獻1829條經驗獲得超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>

反對回復 2018-07-28

慕沐林林

TA貢獻2016條經驗獲得超9個贊

塊級元素都是有內外邊距的。如果你不手動調沒。他就會存在。

就像樓上寫的那樣調沒就好了。

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

反對回復 2018-07-28

2 回答
0 關注
644 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

2 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

一個簡單的兩欄布局下，為另一欄預留的width需要比實際寬度大的問題

2 回答

相關問題推薦

添加回答

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