gpt4 book ai didi

html - CSS 中的数学 - 更精确的百分比

转载 作者:行者123 更新时间:2023-11-28 13:23:12 25 4
gpt4 key购买 nike

这就是我制作大小相等的 3 栏页面的方法:

<div class="wrapper">
<div style="width:33%;float:left;background-color:red;"></div>
<div style="width:33%;float:left;background-color:green;"></div>
<div style="width:33%;float:left;background-color:blue;"></div>
</div>

有没有办法避免使用 width:33% 并输入更准确的数字?我接受 javascript 选项。

最佳答案

首先 - 从 html 中获取这些样式:

<body>
<section class="main-content">
<div class="colum01">Column01</div>
<div class="colum02">Column01</div>
<div class="colum02">Column01</div>
</section>
</body>

在你的 CSS 中:

.main-content {
width: 100%;
float: left;
overflow: hidden;
}

.column01 {
width: 33%;
float: left;
background-color: red;
}

.column02 {
width: 34%;
float: left;
background-color: orange;
}

.column03 {
width: 33%;
float: left;
background-color: yellow;
}

或者你可以使用 33.3 和 33.4 和 33.3%

我一直假设每个人都使用 border-box:一旦你开始填充,这将使一切变得神奇。将内边距插入框内而不是外框,因此您不必担心将所有内边距和宽度加起来达到 100%

Paul Irish on the subject

* {
-moz-box-sizing:边框框;
-webkit-box-sizing:边框框;
框大小:边框框;
}

如果您使用列表在列中显示内容,您可以 :nth 以每列中的第 3 个元素为目标,并仅在这些元素上放置 33.4%...目前不广泛支持使用 calc 并使用 javaScript仍然只是为你创造风格。所以我建议让事情尽可能简单。这对我很有用。 (它消除了当你对所有 3 个都使用 33.3% 时出现的那条讨厌的小黑线。

关于html - CSS 中的数学 - 更精确的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14913286/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com