如何設置寬度相等同比例％在HTML

注：之前我張貼了我的問題，我已搜查這個網站獲得答案，但我找不到任何解決方案，它可以讓我設定的百分比值相等的保證金。如何設置寬度相等同比例％在HTML

下面的代碼不會擴展到它的整整25％懷特：

請參閱下面的HTML代碼示例：

<style> 

#Wrapper { 
    margin:0 auto; 
    width:70%; 
} 

#MainLogo{ 
    width:100%; 
    height:100px; 
    border:1px solid #000; 
} 

#LeftSide{ 
    width:25%; 
    height: 600px; 
    background-color:#90F; 
    margin-top:5px; 
    float:left; 
} 

#FloatLeft { 
    float:left; 
} 

#One{ 
    width:25%; 
    height:300px; 
    background-color:#000; 
    margin-top:5px; 
    float:left; 
} 

#Two{ 
    width:25%; 
    height:300px; 
    background-color:#F00; 
    margin-top:5px; 
    float:left; 

} 

#Three{ 
    width:25%; 
    height:295px; 
    background-color:#F00; 
    margin-top:5px; 
    float:left; 
    clear:both; 
    } 

#Four{ 
    width:25%; 
    height:295px; 
    background-color:#000; 
    margin-top:5px; 
    float:left; 
} 


#RightSide{ 
    width:25%; 
    height: 600px; 
    background-color:#00F; 
    margin-top:5px; 
    float:right; 
    margin-bottom:5px; 
} 

#MainFooter{ 
width:100%; 
    height:100px; 
    border:1px solid #000; 
    clear:both; 
} 

</style> 


<body> 

<div id="Wrapper"> 

<header id="MainLogo"> 
Logo Goes here!! 
</header> 

<aside id="LeftSide"> 
Left side goes here 
</aside> 

<div id="FloatLeft"> 

<aside id="One"> 
One Goes Here!! 
</aside> 

<aside id="Two"> 
Two aside goes here!! 
</aside> 

<aside id="Three"> 
Three aside goes here!! 
</aside> 

<aside id="Four"> 
Four aside goes here!! 
</aside> 
</div> 

<aside id="RightSide"> 
Right side goes here 
</aside> 

<footer id="MainFooter"> 
Main Footer Goes here!! 
</footer> 
</div>

來源

2013-07-01 user2344984

它不是」的原因工作是因爲諸如padding和margin之類的東西。您將需要使用box-sizing屬性來獲得所需的效果。

首先，您應該刪除所有內容的填充和邊距，然後將box-sizing屬性設置爲border-box。這將確保無論您有多少padding或margin，它都會始終保持在您指定的height和width之間。

下面是一個簡單的使用

* { 
    padding:0; 
    margin:0; 
    box-sizing-border-box; 
}

的box-sizing屬性尚未完全支持，所以你需要使用供應商特定屬性

來源

2013-07-01 17:49:04

@ user2344984你試試我的解決方案？ –

嗨，我正在嘗試你提供的盒子尺寸：邊框方案。但由於某種原因，它不起作用。我將繼續練習，因爲我是網頁設計和HTML的新手。 – user2344984

您是否使用供應商前綴？如果您需要更多幫助，請將您的HTML和小提琴添加到您的問題中 –

如何設置寬度相等同比例％在HTML

回答

相關問題