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

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>
- 3 回答
- 0 關注
- 977 瀏覽
相關問題推薦
添加回答
舉報