Question

我在React（语义ui-react）中使用semantic-ui来显示卡片。我需要一种pinterest风格的布局，根据文本的数量，卡片将具有不同的高度。

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

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

提前致谢。

Answer 1

您可以使用this solution from Stack Overflow进行类似pinterest的布局。在我看来，这是最好的网格布局＆＃39;图书馆。至于不同的高度，这可以通过Masonry实现。

关于如何操作的详细信息，您应该阅读Masonry文档，然后先自己尝试一下。如果您仍然遇到问题，可以针对确切问题创建问题或更新此问题。

Answer 2

作为参考，可以找到cdog提供的解决方案here。从本质上讲，它是使用下面的CSS对语义UI进行的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中的原始帖子。

Answer 3

你可以毫无特别地做到这一点。不要把卡片放在卡片组中。而是根据需要制作许多列，并根据需要将卡放在每列中。试试下面的代码：

<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>

具有Pinterest布局的React-Semantic-UI卡

3 个答案: