[英]How do I separate react js cards?
I want to separate them and line up horizontally and vertically我想将它们分开并水平和垂直排列
import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';
function Projects({projectsData}) {
return (
<>
{projectsData.map((index)=>{
const{img,link,title}=index
return(
<div className="_div_">
<div className="cards_">
<div className="_imag">
<img src={img}/>
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
</div>
</div>
)
})}
</>
)
}
export default Projects
._div_{
background-color: #fff;
height: 100vh;
width: 100%;
/* To adjust the height as well */
height: fit-content;
}
._imag{
height: auto;
width: 20%;
background-color: rgb(183, 183, 204);
border-radius: 9px;
}
._imag img{
margin-top:0px;
border-radius: 7px;
}
._writings{
height: 40%;
}
.cards_{
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
import React from 'react'
import BodySection from "../Navbar/BodySection"
import Navbar from "../Navbar/Navbar"
import Content from "../Navbar/Content"
import {Data1,projectsData} from "./Data"
import Projects from "../Navbar/Projects"
function Home() {
return (
<>
<BodySection/>
<Content{...Data1}/>
<Projects projectsData={projectsData}/>
</>
)
}
export default Home
I want to separate the cards and put them horizontally and vertically and not just vertically.我想将卡片分开并将它们水平和垂直放置,而不仅仅是垂直放置。 thank you.
谢谢你。 Please ignore what I am about to write because it wont let me post this saying I need to add more details but I dont have more details to add.
请忽略我要写的内容,因为它不会让我发布这个说我需要添加更多细节但我没有更多细节要添加的内容。
The top level should be the flex into which you map the cards, something like this:顶层应该是 map 卡所在的 flex,如下所示:
function Projects({ projectsData }) {
return (
<div className="_div_">
<div className="cards_">
{projectsData.map((index) => {
const { img, link, title } = index;
return (
<div className="_imag">
<img src={img} />
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
);
})}
</div>
</div>
);
}
You should probably have a card element together with these properties on cards_
to position them better: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/gap您可能应该有一个卡片元素以及卡片上的这些属性_到
cards_
它们更好: /zh-CN/docs/Web/CSS/gap
This is a perfect use case for css flexbox.这是 css flexbox 的完美用例。 I threw together a quick codesandbox for you.
我为你整理了一个快速的代码盒。
You can use my code as a starting point and expand out to your use case.您可以使用我的代码作为起点并扩展到您的用例。
If you need a quick intro to flexbox here's a great video .如果您需要快速介绍 flexbox,这里有一个很棒的视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.