2个具有相同最大宽度的div显示不同的宽度[重复]

Posted 2023-03-06

【中文标题】2个具有相同最大宽度的div显示不同的宽度[重复]

【英文标题】：2 divs with same max-width display different widths [duplicate]

【发布时间】：2020-08-05 02:03:58

【问题描述】：

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

JSFiddle

我正在将这个帮助类应用到两个 div。

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

【问题讨论】：

它似乎在小提琴中正常工作

@Kenny 我的小提琴在拉伸超过 1300 像素时向我展示了与所附图片相同的结果。红色 div 每边悬垂约 25 像素

【参考方案1】：

将 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

【讨论】：

啊，做到了。谢谢！