[英]Card styling in ReactJS
我正在做一个招聘页面项目来练习 React,但我无法找到正确设置这些卡片样式的方法
我想以某种方式设置这些卡片的样式(对不起,我还不能发布图像),当我调整页面大小、检查元素、在移动视图中打开等时,它会自行调整大小,而不是 go 超出主要尺寸页。
卡片组件代码
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>
);
});
};
卡片列表组件的代码
const CardList = () => {
return (
<div className="card-list">
<Card />
</div>
);
};
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;
}
您需要全局添加
img {
max-width: 100%;
}
为您的card.container
提供适当的尺寸,以便所有内容都可以通过指定max-width
来拥有它们的边界
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.