React Card组件

Question

我正在尝试创建3张卡在一排，但我做不到。每个卡片组件都创建max-width: 1366px和row div。我怎么能做到这一点？

class CardNew extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div class="container news-card" style={{ maxWidth: `1366px` }}>
                <div class="row row-width" style={{ width: `300px`, height: `438px`, marginTop: `60px`, marginLeft: `200px`}}>
                    <div class="card-img-top m-fix" style={{ marginLeft: `-10px` }}><img src="https://telgrafs.com/assets/src/article-basketball-little-0.png"></img></div>
                    <div class="card-text news-category" style={{ paddingBottom: `20px` }}>gündem</div>
                    <div class="card-title news-ct" style={{ marginLeft: `-60px`, marginTop: `15px` }}>Ücretsiz Maske Nasıl Alınır?</div>
                    <div class="card-text news-ctext">E-Devlet üzerinden bilgilerinizi girerek ücretsiz maske temin edebilirsiniz. Talepler Sağlık Bakanlığı ile Ulaştırma ve Altyapı Bakanlığı tarafından sizlere ulaştırılacaktır.</div>
                    <div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></img></div>
                    <div class="card-author-name">Kerem Alan</div>
                    <div class="card-post-time disabled">5 saat önce</div>
                    <div class="card-text pb-more card-fixed" style={{ color: `#979797`, marginLeft: `` }}>Devamını oku</div>
                </div>
            </div>
        );
    }
}

我想要的

​

我得到了什么

​

Answer 1

您要查找的类的序列是：

• container
• row
• col-md-XX
• card
• your-card-contents

相关超文本标记语言

<div className="container">
  <div className="row">
    <div className="col-12 col-sm-4">
      <div className="card">
      </div>
    </div>
  </div>
</div>

示例stackblitz here

Answer 2

我将使用CSS-Grid进行布局，下面我给你一个例子。

Here is a link where you can learn CSS Grid

You should try with Flexbox also

​

const App = () => (
    <div className="container">
      <div className="card" />
      <div className="card" />
      <div className="card" />
    </div>
 );
 
 ReactDOM.render(
  <App />,
  document.body
);

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  column-gap: 24px;
  row-gap: 24px;
  max-width: 948px;
  margin: 0 auto;
}


.card {
  height: 438px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​