在反应js中排列卡片答案

【问题标题】：Aranging cards in react js在反应js中排列卡片
【发布时间】：2021-01-31 13:19:20
【问题描述】：

我是初学者，刚开始使用 react js 构建应用程序。我需要整理卡片并将其制成中等大小。我想要下面这样的卡片，任何帮助将不胜感激。提前致谢

但是我越来越像我被困在这里了。

这是我的代码

render() {
    return ( 

        { /*heading starts */ } <
        div style = {
            {
                paddingTop: 150,

                paddingLeft: 70,

                color: 'white'
            }
        } >
        < div style = {
            {
                position: 'absolute',
                paddingLeft: 260,
                color: 'black',
                top: 90,
            }
        } >
        < CardGroup >
        <Card >
        <Card.Img variant = "top"
        src = "./image/free.png" / >
        < Card.Body >
        <Card.Title > Free < /Card.Title> <
        Card.Text >
        in to additional content.This content is a little bit longer. </Card.Text> < /
        Card.Body > <
        Card.Footer >
        <
        small className = "text-muted" > Last updated 3 mins ago < /small> < /
        Card.Footer > 
        </div> 
    );
}

【问题讨论】：

用它发布你的代码。
我已经在下面回答了我的代码
修复缩进并将其放入您的问题中。您可以编辑自己的问题。您需要让人们轻松为您回答问题。

标签： css reactjs card

【解决方案1】：

This is my code 


 <
                    div style = {
                        {
        
                            position: 'absolute',
                            paddingLeft: 260,
                            color: 'black',
                            top: 90,
                        }
                    } >
                    <
                    CardGroup >
                    <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Free < /Card.Title> <
                    Card.Text >
                    in to additional content.This content is a little bit longer. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This card has supporting text below as a natural lead - in to additional content. { ' ' } <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / > <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card>  <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> < /
                    CardGroup >
                    <
                    /
                    div >

【讨论】：

【解决方案2】：

我看到所选卡片的高度是最长的，顶部有阴影和额外的蓝色框。这是你可以做的事情。

创建两个css类，一个具有所有卡片共有的所有样式，另一个具有附加样式（选中），然后使用状态有条件地添加附加类（选中），这样当用户选择卡片A时，它会收到其他样式（选定的类）并在之前选择的卡片中删除它们。

import React, { useState } from "react";
import "./card.css";

const cards = () => {
  const [selected, setSelected] = useState('');
  return (
    <Container>
    <Card className={`normalcard ${selected == "1" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "2" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "3" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "4" ? "selectedcard": ""}`} />
    </Container>
  )
}

export default cards;

.normalcard {
 ...
}

.selectedcard {
  ...normalcard;
  -webkit-box-shadow: 0 0 10px 0 #000000;
    -moz-box-shadow: 0 0 10px 0 #000000;
    box-shadow: 0 0 10px 0 #000000;
}

【讨论】：