每个产品的高度相等

Question

我正在使用Shopify主题，我在每行显示四个产品。除产品色谱柱高度外，一切都很完美。我需要每列的高度相等。我尝试了componentWillMount父类和display: table到子类，但仍然没有工作。还尝试了display:table-cell

我正在分享代码链接，因为我的代码很大，不允许我在这里上传。

https://jsfiddle.net/a8ag2270/1/

我正在获得输出。我需要相同的高度。

Answer 1

哎呀，这是我现在能做的最好的事情。

https://jsfiddle.net/a8ag2270/49/

.grid.grid--uniform.grid--view-items {
    display: flex;
    flex-wrap: wrap;
}

/* had to target more specifically with (div.grid-view-item) */
/* so the margin: 0px auto 35px; gets overridden */
div.grid-view-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0; /* instead of margin: 0px auto 35px; */
}

.grid-view-item__link.grid-view-item__image-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* same story here */
div.grid-view-item__meta {
  margin-top: auto; /* override margin-top: 8px; */
}

它可以用很少的样式（或者可能不是）来完成，但我喜欢使用flexbox并使用它们，所以我使用了它。

你需要做的就是将min-height设置为标题，描述等，如果你想让它们水平对齐＆＃34; （无法找到合适的词语）。

以上款式将价格降低，位于按钮上方。如果您不想要这种行为，可以使用：

.grid.grid--uniform.grid--view-items {
  display: flex;
  flex-wrap: wrap;
}

div.grid-view-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.grid-view-item__link.grid-view-item__image-container {
  flex: 1;
}

或者这个：

.grid.grid--uniform.grid--view-items {
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  display: flex;
}

div.grid-view-item {
  display: flex;
  flex-direction: column;
}

.grid-view-item__link.grid-view-item__image-container {
  flex: 1;
}

Answer 2

在css文件中添加以下代码：

abs -n 100 -c 100 https://ib3rf43def /courses/search?query=course  > ../../abTestResult.txt

Answer 3

只需将样式添加到grid-view-item__link

即可

.grid-view-item__link{
    height:400px;
}

将400更改为您想要的任何高度。

以下是fiddle