如何设置宽度相等同比例％在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

回答

相关问题