Question

我正在制作一个从giffy api获取大量giffs的应用程序，并且它的工作正常，但是我遇到了css问题。我将其设置为3列，然后设置为2，最后是媒体查询设置为1。但是，我注意到这些列是它们在y轴上彼此溢出的。我正在尝试很多溢出y，所以第四。发生的情况是它显示它溢出，然后没有溢出，然后在下一列中按下顶部giff的起始位置。

我正在尝试获取每个吉夫琴，并让它们全部从同一顶部开始。

反应码

 <div>
  {this.props.giphs ? (
    <div className="giffWrapper">
      {this.props.giphs.map((g, i) => {
        return (
          <div
            className={`gifs ${outline}`}
            key={i}
            style={{
              paddingBottom: `${Math.round(
                Number(
                  (g.images["480w_still"].height /
                    Number(g.images["480w_still"].width)) *
                    100
                )
              )}%`
            }}
          >
            <iframe
              src={g.embed_url}
              title={g.title}
              frameBorder="0"
              className="giphy-embed"
              allowFullScreen
            />
          </div>
        );
      })}
    </div>
  ) : null}
</div>;

css文件

.giffWrapper {
  -webkit-column-count: 3;
  -moz-column-count:    3;
  column-count:         3;
  margin-bottom: 400px;

}

.gifs {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

iframe {
  /* Just in case there are inline attributes */
  position:absolute;
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  overflow: hidden
}


@media (max-width: 1025px) {
  .giffWrapper {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  height: 120%;
  }
  iframe {

  }
}

@media (max-width: 600px) {
  .giffWrapper {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

enter image description here

React App上的CSS issus在y轴上有列溢出

0 个答案: