[英]Card styling in ReactJS
I am working on a hiring page project to practice React and I can't figure out a way to style these cards properly我正在做一个招聘页面项目来练习 React,但我无法找到正确设置这些卡片样式的方法
I want to style these cards in a way (sorry, I can't post images yet) that when I resize the page, inspect element, open in mobile view etc, it resizes on its own and not go outside the dimensions of the main page.我想以某种方式设置这些卡片的样式(对不起,我还不能发布图像),当我调整页面大小、检查元素、在移动视图中打开等时,它会自行调整大小,而不是 go 超出主要尺寸页。
Code for Card component卡片组件代码
const Card = () => {
return openingData.map((el) => {
return (
<div className="card-container card">
<div className="positions-container">{el.positions}</div>
<div className="image-container">
<img src={el.logo} alt="" height="375" width="475" />
</div>
<div className="card-content">
<div clasName="title-container">
<b>
<h3>{el.title}</h3>
</b>
</div>
<div className="message-container">
<h5>{el.message}</h5>
</div>
</div>
<div className="button-container">
<button className="buttons btn">Join Now!</button>
</div>
</div>
);
});
};
Code for Card-list component卡片列表组件的代码
const CardList = () => {
return (
<div className="card-list">
<Card />
</div>
);
};
CSS CSS
.card-container {
display: flex;
flex-direction: column;
border: 1px solid rgba(1, 1, 1, 0.922);
border-radius: 25px;
padding: 25px;
cursor: pointer;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}
.card-container:hover {
transform: scale(1.05);
}
.card-list {
width: 85vw;
margin: 0 auto;
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
You need to add globally您需要全局添加
img {
max-width: 100%;
}
give appropriate dimensions to your card.container
so that all the content can have their boundary by specifying max-width
为您的
card.container
提供适当的尺寸,以便所有内容都可以通过指定max-width
来拥有它们的边界
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.