在React js中排列卡片

问题描述

我是一个初学者，刚开始使用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类，一个具有所有卡片共有的所有样式，另一个具有其他样式（选择），然后有条件地使用state添加其他类（选择），以便用户选择卡片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;
}

,

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 >