Css 使用React虚拟化时增加元素之间的间距

Css 使用React虚拟化时增加元素之间的间距,css,reactjs,list,react-virtualized,Css,Reactjs,List,React Virtualized,我正在使用React虚拟化创建一个延迟加载无限列表 但是,我无法在渲染的div之间创建间隙,因为它们是绝对定位的,并且top是动态计算的 我尝试了以下方法,但没有成功。 有没有关于如何在每个元素之间增加这个差距的想法?谢谢 <AutoSizer disableHeight> {({width}) => ( <List onRowsRendered={onRowsRendered}

我正在使用React虚拟化创建一个延迟加载无限列表

但是,我无法在渲染的div之间创建间隙,因为它们是绝对定位的,并且top是动态计算的

我尝试了以下方法,但没有成功。 有没有关于如何在每个元素之间增加这个差距的想法?谢谢

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

{({width})=>(
)}

我最终解决了填充问题,在CellMeasurer中添加了一个div作为父容器来提供填充

div是绝对定位的容器,而卡片是填充的,并显示方框阴影

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>

{({measure})=>(