Question

我正在尝试使用Flexbox创建一个网格，以在我的主页上输出WordPress最新帖子。但由于每个框内的内容不同，每个框的高度不相等，这就产生了问题。我尝试使用align-item = justify和其他一些推荐选项，但似乎没有任何工作。

这是我正在使用的CSS：

.home-latest-posts {
      display: flex;
      flex-wrap: wrap;
}
.home-latest-posts .post {
     background: #fff none repeat scroll 0 0;
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    width: 32%;
}
.home-latest-posts .post:nth-child(3n+2) {
   margin-left: 2%;
   margin-right: 2%;
}
.home-latest-posts .post .entry-title {
  padding: 1em 3em 0.5em;
}
.home-latest-posts .post .entry-content {
 padding: 0 3em 1em;
}

但是，由于可能存在其他可能干扰的代码，我会链接到实际页面，以便您可以全面了解。

您可以在此测试网站（http://moneyrope.com/）看到我遇到的问题。它是＆＃34;最新资金提示＆＃34;。

下的部分

抱歉这个烂摊子。它只是一个测试网站。

Answer 1

添加此部分

.widget-wrap {
  display: flex;
  flex-wrap: wrap;
}
.home-latest-posts .post {
  margin-bottom: 3rem;
}

不要忘记prefix所有代码。您还应该考虑将其包装在min-width @media查询

中

Flexbox等高（具有不同大小的内容）不起作用

1 个答案: