如何在html中设置与百分比%相等的宽度_Html_Css_Css Float

如何在html中设置与百分比%相等的宽度

html css

如何在html中设置与百分比%相等的宽度,html,css,css-float,Html,Css,Css Float,注: 在我发布我的问题之前，我已经搜索了这个网站以获得答案，但我找不到任何允许我设置相同百分比值的解决方案以下代码未按比例扩展到其全部25%：请参见下面的示例HTML代码： <style> #Wrapper { margin:0 auto; width:70%; } #MainLogo{ width:100%; height:100px; border:1px solid #000; } #LeftSide{ width

注: 在我发布我的问题之前，我已经搜索了这个网站以获得答案，但我找不到任何允许我设置相同百分比值的解决方案

以下代码未按比例扩展到其全部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>


#包装纸{
保证金：0自动；
宽度：70%；
}
#主标志{
宽度：100%；
高度：100px；
边框：1px实心#000；
}
#左边{
宽度：25%；
高度：600px；
背景色：#90F；
边缘顶部：5px；
浮动：左；
}
#向左浮动{
浮动：左；
}
#一个{
宽度：25%；
高度：300px；
背景色：#000；
边缘顶部：5px；
浮动：左；
}
#两个{
宽度：25%；
高度：300px；
背景色：#F00；
边缘顶部：5px；
浮动：左；
}
#三{
宽度：25%；
高度：295px；
背景色：#F00；
边缘顶部：5px；
浮动：左；
明确：两者皆有；
}
#四{
宽度：25%；
高度：295px；
背景色：#000；
边缘顶部：5px；
浮动：左；
}
#右侧{
宽度：25%；
高度：600px；
背景色：#00F；
边缘顶部：5px；
浮动：对；
边缘底部：5px；
}
#主页脚{
宽度：100%；
高度：100px；
边框：1px实心#000；
明确：两者皆有；
}
标志在这里！！
左边是这里
一个在这里！！
两个人在这里！！
三个在这里！！
这里有四个！！
右边是这里
主页脚在这里！！

它不起作用的原因是因为诸如

填充

和

边距

之类的事情。您需要使用

框大小属性来获得想要的效果
首先，您应该删除所有内容的填充和边距，然后将框大小
属性设置为边框框
。这将确保无论您有多少填充
或边距
，它都将始终保持在您指定的高度和宽度
下面是一个示例用法
* {
  padding:0;
  margin:0;
  box-sizing-border-box;
}

框大小调整
属性尚未完全受支持，因此您需要使用特定于供应商的属性
@user2344984是否尝试过我的解决方案？您好，我正在尝试您提供的框大小调整：边框框解决方案。但由于某种原因，它不起作用。我会继续练习，因为我对网页设计和HTML还不熟悉。你用过厂商的前缀吗？如果你想获得更多帮助，请在问题中添加HTML和提琴嗨，是的，我确实使用了供应商前缀，但我无法让它工作。除了#1#2#3和#4之外，所有html代码都可以。请给我举个例子，我需要你的HTML，还有一把小提琴