反應卡組件

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

您正在尋找的課程順序是：

• 容器
• 排
• col-md-XX
• 卡片
• 你的卡片內容

相關HTML ：

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

示例堆棧閃電在這里

Answer 2

我會使用 CSS-Grid 進行布局，我在下面給你一個例子。

這是一個鏈接，您可以在其中學習 CSS Grid

您也應該嘗試使用 Flexbox

 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>