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

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

CSS Calc替代

CSS Calc替代

鳳凰求蠱 2019-12-17 09:54:21
我正在嘗試使用CSS和沒有jquery動態地更改div的寬度。以下代碼將在以下瀏覽器中運行:http : //caniuse.com/calc/* Firefox */width: -moz-calc(100% - 500px);/* WebKit */width: -webkit-calc(100% - 500px);/* Opera */width: -o-calc(100% - 500px);/* Standard */width: calc(100% - 500px);我還希望支持IE 5.5及更高版本,我發現了以下內容:表達式。這是正確的用法嗎?/* IE-OLD */width: expression(100% - 500px);我還可以支持Opera和Android瀏覽器嗎?
查看完整描述

3 回答

?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

幾乎總是box-sizing: border-box可以替換計算規則,例如calc(100% - 500px)用于布局。


例如:


如果我有以下標記:


<div class="sideBar">sideBar</div>

<div class="content">content</div>

而不是這樣做:(假設邊欄為300px寬)


.content {

  width: calc(100% - 300px);

}

做這個:


.sideBar {

     position: absolute; 

     top:0;

     left:0;

     width: 300px;

}

.content {

    padding-left: 300px;

    width: 100%;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

* {

  margin: 0;

  padding: 0;

}

html,

body,

div {

  height: 100%;

}

.sideBar {

  position: absolute;

  top: 0;

  left: 0;

  width: 300px;

  background: orange;

}

.content {

  padding-left: 300px;

  width: 100%;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  background: wheat;

}

<div class="sideBar">sideBar</div>

<div class="content">content</div>

PS:我不會在IE 5.5(hahahaha)中工作,但它將在IE8 +,所有移動設備和所有現代瀏覽器(caniuse)中工作

我剛剛從Paul Irish的博客中找到了這篇文章,他還展示了框大小作為簡單calc()表達式的一種可能選擇:(粗體是我的)


邊框可以很好地解決邊界框問題,這是我最喜歡的用例之一。我可能想用50%或20%的列劃分網格,但想通過px或em添加填充。沒有CSS即將發布的calc(),這是不可能的……除非您使用border-box。


注意:以上技術確實與相應的calc()語句看起來相同。雖然有區別。使用calc()規則時,內容div的寬度值實際為100% - width of fixed div,但是使用上述技術,內容div的實際寬度為全100%寬度,但外觀為“填滿”剩余寬度。(這可能足以滿足大多數人的需求)


也就是說,如果內容div的寬度實際上是很重要的,100% - fixed div width 那么可以使用另一種技術-利用塊格式化上下文-(請參見此處和此處的詳細信息):


1)浮動固定寬度div


2)在內容div上設置overflow:hidden或overflow:auto


查看完整回答
反對 回復 2019-12-17
?
慕容森

TA貢獻1853條經驗 獲得超18個贊

用%或px更改#menuLog寬度,您將看到魔術。甚至適用于<2.3的所有設備


*{

-moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

#menuLog{

  width:30%;

  /*width:300px;*/

height: 60px;

padding: 5px;

background-color: #ddd;

}

#menuLog > div[inline-log="1"]{

display: inline-block;

vertical-align: top;

width: 100%;

height: 100%;

margin-right: -60px;

}

#menuLog > div[inline-log="1"] > div[inline-log="1.1"]{

margin-right: 60px;

height: 100%;

background-color: red;

}

#menuLog > div[inline-log="2"]{

display: inline-block;

vertical-align: top;

width: 60px;

height: 100%;

}

#menuLog > div[inline-log="2"] > div[inline-log="2.1"]{

display: inline-block;

vertical-align: top;

width: 55px;

height: 100%;

background-color: yellow;

margin-left:5px;

}

<div id="menuLog">

  <div inline-log="1">

    <div inline-log="1.1">

      One

    </div>

  </div><div inline-log="2">

     <div inline-log="2.1">

      Two

     </div>

  </div>

</div>


查看完整回答
反對 回復 2019-12-17
  • 3 回答
  • 0 關注
  • 977 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號