gpt4 book ai didi

html - 具有相同最大宽度的 2 个 div 显示不同的宽度

转载 作者:行者123 更新时间:2023-12-04 10:10:25 25 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





How to make an element width: 100% minus padding?

(15 个回答)


2年前关闭。




红色框的 div 以及绿色和紫色框的 div 都设置为相同的最大宽度 75rem。当在宽显示器上拉伸(stretch)时,我对红色框如何显示近 1250 像素的最大宽度感到困惑。

JSFiddle

我将这个助手类应用于两个 div。

.wrapper {
margin: auto;
max-width: 75rem;
}

enter image description here

最佳答案

添加 CSS box-sizing:border-box给您的.hero将解决问题。

发生什么了

.hero左右有 20px 的内边距。你的整个 div 变成 75rem + 40px
box-sizing:border-box确保填充应包含在宽度中。所以你的 div 的实际宽度将变为 75rem - 40px

更多关于盒子尺寸的信息:https://www.w3schools.com/css/css3_box-sizing.asp

关于html - 具有相同最大宽度的 2 个 div 显示不同的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61358555/

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