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

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

转载作者：行者123 更新时间：2023-11-28 12:45:12

注意:在我发布我的问题之前，我搜索了这个网站来获得答案，但我找不到任何允许我在百分比值中设置等边距的解决方案。

以下代码未缩放到完整的 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>

最佳答案

它不工作的原因是因为诸如 padding 之类的事情和 margin .您将需要使用 box-sizing属性来获得你想要的效果。

首先，您应该删除所有内容的填充和边距，然后设置 box-sizing属性(property)border-box .这将确保无论多少padding或 margin你有，它将永远停留在height , 和 width您指定。

这是一个示例用法

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

box-sizing属性尚未得到完全支持，因此您将需要使用供应商特定的属性

关于html - 如何在 html 中设置与百分比 % 相等的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17410504/

文章推荐： css - 960 网格中的 100% 宽度页脚

文章推荐： javascript - 使用 Haxe 输出 JavaScript

文章推荐： Ajax 响应中的 JavaScript 代码

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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