1
504:root {
--offset: 30px;
}
.grid-cols-custom {
/* 使用自定义属性和calc()计算列宽 */
grid-template-columns: calc((424px / (100% - var(--offset))) * 100%) calc((608px / (100% - var(--offset))) * 100%);
在一个网格中，我有两个项目，一个是424px，另一个是608px。我希望它们是响应式的。但是填充和间隙会导致视觉错误。所以我想要一个带有计算的百分比：
逻辑：((424px / (div的全宽度 - 30px)) * 100%)，这样我们的div将始终调整它们的宽度
请帮帮我。这里有一个CSS验证器报告的问题：“一个操作数必须是一个数字”
我已经做了4个小时了：{
收藏
收藏
收藏
Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
根据您使用的数值，这似乎是正确的做法。它是响应式的，大小基本相同，之间有30px的间隔。我认为您的解决方案太复杂且脆弱，特别是在响应式方面。
您的数字：
这大致是40%到60%的比例。使用
4fr 6fr或者更好的2fr 3fr应该足够接近。.grid { display: grid; grid-template-columns: 2fr 3fr; gap: 30px; height: 300px; } .col { background: lightseagreen; }如果您愿意，我们可以通过使用
424fr 608fr来更接近。这是奇数，但这将是您所寻找的确切值。在总宽度中，使用424个分数作为第一列，使用608个分数作为第二列。然后添加间隔。.grid { display: grid; grid-template-columns: 424fr 608fr; gap: 30px; height: 300px; } .col { background: lightseagreen; }