Question

我创建了一个Steam Inventory Viewer，但有些项目的名称较长。如果item的名字有点长，div containter会比其他的更大（你可以看看demo：freegamekeys.info / trade或image on http://prntscr.com/crpqk5）。我不知道如何解释我的问题，所以我把你的网站链接到了。

任何方法可以修复这些div包含器与其他包含器相同吗？请注意，我无法更改图片或项目名称。

感谢。

Answer 1

只需使用

.card {
  max-height: 155px;
  min-height: 155px;
  padding: 10px;
  box-sizing: border-box;
}

在你的CSS中

。如果要垂直对齐其内容，则需要更多CSS：

.card {
  max-height: 155px;
  min-height: 155px;
  padding: 10px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

不要忘记Autoprefix它。它会生成更多的代码，但在大多数浏览器上看起来都不错。

例如，上述CSS的生产版本如下所示：

.card {
    max-height: 155px;
    min-height: 155px;
    padding: 10px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

如果你想补偿图像后的烦恼<br />，只需使用

.card>img { margin-bottom: -10px; }

如何修复/适合这个div包含？

1 个答案: