Question

我正在使用react。 Material-ui适用于Cards。对于Grid我正在使用CSS网格布局。到目前为止它看起来像这样：

但我的目标是这样的：

我有两个问题：

我希望所有这些cards具有相同的高度（415px）。我试过身高：.BeerListingScroll-info-box上的415px，但它不起作用。
瓶子和桶的图像尺寸不同[keg（80px x 160px）与瓶子（80px x 317px）]不同。有没有办法让它们在渲染大小上更相似？

-

代码：

BeerListingScroll

import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';

import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';

import './style.css';

class BeerListingScroll extends Component {
  constructor(props) {
    super(props);

    this.loadBeers = this.loadBeers.bind(this);
  }

  loadBeers() {
    const { skip, limit } = this.props.beers;
    this.props.fetchBeers(skip, limit);
  }

  render() {
    const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
    return (
      <div className="container beers-lazy-scroll">
        <ReduxLazyScroll
          isFetching={isFetching}
          errorMessage={errorMessage}
          loadMore={this.loadBeers}
          hasMore={hasMore}
        >
          <div className="BeerListingScroll-wrapper">
            {beersArray.map(beer => (
              <div key={beer.id} className="BeerListingScroll-info-box">
                <BeersListItem beer={beer} />
              </div>
            ))}
          </div>
        </ReduxLazyScroll>
        <div className="row beers-lazy-scroll__messages">
          {isFetching && (
            <div className="alert alert-info">
              <ProgressIndicator />
            </div>
          )}

          {!hasMore &&
            !errorMessage && (
              <div className="alert alert-success">
                All the beers has been loaded successfully.
              </div>
            )}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    beers: state.beers,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchBeers }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);

BeerListingScroll css

.BeerListingScroll-wrapper {
  display: grid;
  margin: 0;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) ) ;
  background-color: #f7f7f7;
}

.BeerListingScroll-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  width: 320px;
}


/* This applies from 600px onwards */
@media (min-width: 1820px) {
  .BeerListingScroll-wrapper {
    margin: 0 400px;
  }
}

@media (min-width: 1620px) {
  .BeerListingScroll-wrapper {
    margin: 0 300px;
  }
}

@media (min-width: 1366px) {
  .BeerListingScroll-wrapper {
    margin: 0 200px;
  }
}

BeerListItem是BeerListingScroll的孩子

import React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';

function BeerListItem(props) {
  return (
    <div>
      <Card raised>
        <CardContent>
          <img src={props.beer.image_url} alt="beer" width="30%" />
          <Typography variant="headline" component="h2">
            {props.beer.name}
          </Typography>
          <Typography component="p">{props.beer.tagline}</Typography>
        </CardContent>
      </Card>
    </div>
  );
}

export default BeerListItem;

github上的完整项目 - ＆gt; Github

Answer 1

因此，对于图像尺寸，我很棒answer。

我补充道：

.BeerListItem-img {
  height: auto;
  max-height: 250px;
  width: auto;
  max-width: 250px;
}

对于卡片大小，我刚刚将BeerListItem课程内容添加到Card，就像这样（.BeerListItem-main-card）：

function BeerListItem(props) {
  return (
    <div>
      <Card raised className="BeerListItem-main-card">
        <CardContent>
          <img
            src={props.beer.image_url}
            alt="beer"
            className="BeerListItem-img"
          />
          <Typography variant="headline" component="h2">
            {props.beer.name}
          </Typography>
          <Typography component="p">{props.beer.tagline}</Typography>
        </CardContent>
      </Card>
    </div>
  );
}

这是该组件的相应css。

.BeerListItem-main-card {
  width: 320px;
  height: 415px;
}

.BeerListItem-img {
  height: auto;
  max-height: 250px;
  width: auto;
  max-width: 250px;
}

通过这两项改变，我实现了目标。

Answer 2

你应该尝试探索display：flex;

以下链接指向可以帮助您实现目标的梦幻代码笔：

https://codepen.io/enxaneta/full/adLPwv

更具体地说，这是我用你可能想要实现的目标创建的一个例子。

https://jsfiddle.net/dalecarslaw/sxdr3eep/

以下是您应关注的代码区域：

  display:flex;
  align-items:space-between;
  justify-content:space-between;
  flex-wrap:wrap;

制作相同尺寸的卡片和图片 - 如何使用CSS进行操作？

2 个答案: