显示右侧有一个大一个和两个小一个的图像

Question

我正在使用Material-用户界面-Next，并试图以一种非常特殊的方式创建图像。

   ------  ---------
   |    |  |   | 2 |
   |    |  | 1 |---|
   |    |  |   | 3 |
   ------  ---------

我有一些相当奇怪的问题。

1-3出现在1下面

2-2和3不会填满它们的整个空间（当突出显示时，无论图像如何，只有一半的内容空间被利用）

3-有时我会得到类似以下的东西：

   ------  ---------
   |    |  |   | 2 |
   |    |  | 1 |---|
   |    |  |   | 3 |
   |    |  ---------
   ------
in that instance, everything on the right isn't extending all the way down

为了便于参考，如果您遵循此链接，那么您将转到物料ui下一个GridList文档。在高级网格列表下，您将看到一个大图像和许多小图像。我的目标是将其水平翻转。

我已经攻击了以下内容：

  <GridList cols={4} rows={2}>
  {
    media.map((file, i) => (
      <GridListTile style={{ display: 'flex', flexFlow: 'wrap row' }} cellHeight={200} key={i} cols={i===0 ? 3 : 1} rows={i===0 ? 2 : 1}>
        <img src={file.url} />
      </GridListTile>
    ))
  }
  </GridList>

上述结果导致3出现在2以下

  <GridList cols={2} row={2} className={classes.gridList}>
    {
      <GridListTile cellHeight={200} key={1} cols={2} rows={2}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>
  </Grid>

  <Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
    <Typography style={{ visibility: 'hidden' }}>a</Typography>
    <GridList>
    {
      user && user.Media &&
      <GridListTile cellHeight={200} style={{paddingBottom: 0}}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>
    <GridList>
    {
      user && user.Media &&
      <GridListTile cellHeight={200} key={1} cols={1}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>

这解决了问题1，但问题2和3仍然存在。

我曾尝试使用原生flex box，但每次我都会将原本应该更大的图像转换为其他图像的大小。

这是我用于flex-box的css（诚然很少）。

gridContainer: {
    display: 'flex',
    flexFlow: 'row',
    justifyContent: 'space-around',
    margin: '3rem 0'
},

下面的内容比上面的任何内容都有效。这两个小侧面图像工作正常，并且会随着屏幕的变化而改变大小。大图像不会并且将保持完全固定。

新建CSS

gridList: {
    transform: 'translateZ(0)',
    display: 'flex',
    justifyContent: 'left',
    alignItems: 'left',
    overflow: 'hidden',
    '& img': {
      flexShrink: 1,
      minWidth: '200%',
      minHeight: '200%'
    }
  },
  gridListSmall: {
    transform: 'translateZ(0)',
    display: 'flex',
    justifyContent: 'left',
    alignItems: 'left',
    overflow: 'hidden',
    '& img': {
      flexShrink: 0,
      minWidth: '100%',
      minHeight: '100%'
    }
  },

新的超文本标记语言/JSX

       <div cols={2} row={2} className={classes.gridList}>
        {
          <div cellHeight={200} key={1} cols={2} rows={2}>
            <img src={file.url} />
          </div>
        }
        </div>
      </Grid>

      <Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
        <Typography style={{ visibility: 'hidden' }}>a</Typography>
        <div>
        {
          user && user.Media &&
          <div cellHeight={200} style={{paddingBottom: 0}}>
            <img src={file.url} />
          </div>
        }
        </div>
        <div>
        {
          user && user.Media &&
          <div cellHeight={200} key={1} cols={1}>
            <img src={file.url} />
          </div>
        }
        </div>

Answer 1

在创建这个答案时，我使用了Valentin在问题中发布的建议和帖子上的评论。我最终放弃了GridList，而只使用了Flexbox。

html/jsx

            <Grid item xs={12} md={8} style={{paddingRight: 0}}>
              <Typography type="body2">Media</Typography>

                <div>
                {
                  <div className={classes.gridListContainer}>
                    <div className={classes.gridList} style={{width: '70%'}}>
                      <img
                        src={media.url[0]}
                        alt={media[0].name}
                      />
                    </div>
                    <div className={classes.gridListSmall} style={{width: '30%'}}>
                      <img
                        src={media.url[1]}
                        alt={media[1].name}
                      />
                      <img
                        src={media.url[2]}
                        alt={media[2].name}
                      />
                    </div>
                  </div>
                }
                </div>

css

  gridListContainer: {
    display: 'flex',
    flexFlow: 'row'
  },
  gridList: {
    transform: 'translateZ(0)',
    alignItems: 'stretch',
    overflow: 'hidden',
    '& img': {
      width: '100%',
      height: '100%',
    }
  },
  gridListSmall: {
    transform: 'translateZ(0)',
    // flexFlow: 'column',
    justifyContent: 'left',
    alignItems: 'stretch',
    overflow: 'hidden',
    '& img': {
      flexShrink: 0,
      height: '50%',
      verticalAlign: 'middle'
    },
    '& div img': {
      flexShrink: 0,
      height: '50%',
      verticalAlign: 'middle',
      content: 'words'
    }
  }

   ---------
   |   | 2 |
   | 1 |---|
   |   | 3 |
   ---------

Answer 2

保留您指向高级网格列表的示例中的源代码

看看这一行：

<GridListTile 
  key={tile.img}
  cols={tile.featured ? 2 : 1}
  rows= {tile.featured ? 2 : 1}>

所有特色图片占据2列2行。

您希望您的特色图像是1列乘2行，所以您要做的是将此列={tile.featured？2:1}更改为此列={tile.cols | | 1}。

您可以指定网格列表有多少列：

<GridList cols={2}>

您可以设置单元格高度：

<GridList cellHeight={160}>

您可以更改整个栅格的属性：

const styles = theme => ({
  gridList: {
    width: 500,
    height: 450,
  }
});

更灵活的方法是将行设置为<代码>行={tile.rows | | 1}。

现在，您可以控制每个图像可以占用多少列和行

const tileData = [
{
    img: image,
    title: 'Image' // no rows or columns means 1x1
},
{
    img: image,
    title: 'Image',
    rows: 2 // 2 rows 1 column
},
{
    img: image,
    title: 'Image',
    cols: 2 // 1 rows 2 columns
},
{
    img: image,
    title: 'Image',
    rows: 2,
    cols: 2 // 2 rows & 2 columns
},

我认为你的元素混合得很厉害。网格结构为：

• 网格容器=带类的div。根
  • 网格列表=<代码>
  • 你的形象
  • 一些其他内容

  <代码>

  在您的代码中，我看到divwitholandrow，divwithcell Height，结构不完整（我看不到整个树）...我对此没有任何意义。

  问题

  • 您使用的是示例中提到的组件吗

  暗示

  您引用的组件不能保证图像的精确顺序，它们会重新排序以填充所有单元格。