Html 填充底部/顶部，用于不同宽度的响应块

你好

我有以下任务：我想构建一个卡片网格（例如-news），它将随着浏览器宽度的变化保持它们的比例。出于这个原因，我决定使用纵横比黑客设置卡的高度（设置填充顶部）

此解决方案适用于宽度相同的卡片。但我的设计使用普通卡和双卡

我选择了“桌面优先”的策略。所以我的目标是用起始高度-300px来保存卡片的比例

因此，在我的设计中，我有一个普通卡，起始尺寸：

宽度：380px，高度：300px

。和双卡，起始尺寸：

宽度：780px，高度：300px

对于每种情况，我都计算了

padding top

的值。对于普通卡：

300/380=07894736842105263

，因此

填充顶部：78.94836842105263%

。对于双卡：

300/780=038461538446153846

，因此

填充顶部：38.46153846153846%

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：无衬线；
背景色：#f0；
颜色：#323232；
}
.集装箱{
最大宽度：1600px；
右边距：自动；
左边距：自动；
左侧填充：10px；
右边填充：10px；
}
.行{
利润率：0-10px；
}
.row:：之前，.row:：之后{
显示：表格；
内容：''；
}
.行：：之后{
明确：两者皆有；
}
上校{
浮动：左；
宽度：100%；
填充：0 10px；
}
@介质（最小宽度：768px）{
上校--普通的{
宽度：50%；
}
}
@介质（最小宽度：920px）{
上校--普通的{
宽度：33.3333%；
}
上校，加倍{
宽度：66.6666%；
}
}
@介质（最小宽度：1220px）{
上校--普通的{
宽度：25%；
}
上校，加倍{
宽度：50%；
}
}
.卡片{
位置：相对位置；
边缘底部：20px；
背景位置：中心；
背景尺寸：封面；
}
.卡片名称{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
填充：10px；
字号：18px；
字号：700；
}
.普通卡{
垫面：78.94836842105263%；
}
.信用卡加倍{
垫面：38.46153846153846%；
}

大牌头衔
普通卡片标题
普通卡片标题
普通卡片标题
普通卡片标题
普通卡片标题

有趣的问题

如果希望高度完全相等，则需要以相同的方式计算它们。所以，让我们把col——比col——规则的宽度增加一倍

现在，填充技巧对两者都是一样的

这辆车需要有200%的宽度。我们需要调整间距，设置一个足够的余量，使其达到两倍

旁注：您可以考虑切换到网格显示。

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：无衬线；
背景色：#f0；
颜色：#323232；
}
.集装箱{
最大宽度：1600px；
右边距：自动；
左边距：自动；
左侧填充：10px；
右边填充：10px；
}
.行{
利润率：0-10px；
}
.row:：之前，.row:：之后{
显示：表格；
内容：''；
}
.行：：之后{
明确：两者皆有；
}
上校{
浮动：左；
宽度：100%；
填充：0 10px；
}
@介质（最小宽度：768px）{
上校--普通的{
宽度：50%；
}
}
@介质（最小宽度：920px）{
上校--普通的{
宽度：33.3333%；
}
上校，加倍{
宽度：33.3333%；
保证金权利：33.33%；
}
}
@介质（最小宽度：1220px）{
上校--普通的{
宽度：25%；
}
上校，加倍{
宽度：25%；
右边距：25%；
}
}
.卡片{
位置：相对位置；
边缘底部：20px；
背景位置：中心；
背景尺寸：封面；
}
.卡片名称{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
填充：10px；
字号：18px；
字号：700；
}
.card--普通，.card--翻倍{
垫面：78.94836842105263%；
}
.信用卡加倍{
宽度：计算（200%+20px）；
}

大牌头衔
普通卡片标题
普通卡片标题
普通卡片标题
普通卡片标题
普通卡片标题

在我看来，我找到了一个灵活的问题解决方案

诀窍是使用flexbox模块处理字符串

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：无衬线；
背景色：#f0；
颜色：#323232；
}
.集装箱{
最大宽度：1180px；
右边距：自动；
左边距：自动；
左侧填充：10px；
右边填充：10px；
}
.行{
利润率：0-10px；
}
.row:：之前，.row:：之后{
显示：表格；
内容：''；
}
.行：：之后{
明确：两者皆有；
}
上校{
浮动：左；
宽度：100%；
填充：0 10px；
溢出：隐藏；
}
@介质（最小宽度：768px）{
上校--普通的{
宽度：50%；
}
}
@介质（最小宽度：920px）{
上校--普通的{
宽度：33.3333%；
}