2

我在 React (semantic-ui-react) 中使用语义 ui 来显示卡片。我需要一个 pinterest 样式的布局，其中卡片将根据存在的文本数量具有不同的高度。

 ....
<Card.Content>
  <Card.Header className="textheader">
       <b>{this.props.tittle}</b>
  </Card.Header>
  </Card.Content>
            <CardsExtra question="My Question goes here"/>
....

我想要的是对于一个包含更多单词的问题，卡片的高度应该增加。目前，所有卡片的高度都与具有最大高度（最大字数）的那张卡片的高度相同。

提前致谢。

4

3 回答 3

3

您可以使用Masonry进行类似 pinterest 的布局。在我看来，它是最好的“网格布局”库。至于不同的高度，这对于砌体是可能的。

至于如何做的细节，你应该阅读 Masonry 文档，然后先自己尝试。如果您仍然有问题，您可以为确切的问题创建一个问题或更新这个问题。

于 2017-02-20T07:17:15.557 回答
1

您可以在没有任何特别之处的情况下执行此操作。不要将卡片放在卡片组中。取而代之的是，制作任何你想要的列，并根据需要将卡片放在每一列中。试试下面的片段：

<Grid columns={3} stretched>
  <Grid.Column>
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
    <Card style={{ height: '30px' }} />
  </Grid.Column>
</Grid>
于 2017-09-28T02:38:40.783 回答
1

作为参考，可以在此处找到 cdog 提供的解决方案。本质上，它是对语义 UI 的 CSS hack，使用下面的 CSS。

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }

  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}

它有效，结果看起来很有希望 http://jsfiddle.net/cdog/oj4ew4Le/embedded/result

纯 CSS 解决方案的唯一缺点是内容的顺序必须是从上到下，然后从左到右，而不是从左到右，然后从上到下。

对于替代排序选项，似乎需要 Masonry 或类似的 JS 库。有关示例，请参阅 GitHub 中的原始帖子。

于 2017-09-17T20:01:37.447 回答