我使用地图来适应现在的数据样式,这是我遇到问题的地方,因为我使用了显示网格,这是代码
<div className="incentive-card">
<div className="incentive-card-header">
<h3>The power of your donation</h3>
<p>
Every drop of blood can transform a life. By donating blood, you
support accident victims, patients in surgeries, and your community.
</p>
</div>
<div className="incentive-product-card-container">
{InData.slice(0, 3).map((d) => (
<div className="product-card2">
<div className="incentive-card-text">
<h3>{d.title}</h3>
<p>{d.description}</p>
</div>
<div className="incentive-card-image">
<img src={d.image} alt="/" />
</div>
</div>
))}
</div>
<div className="incentive-product-card-container">
{InData.slice(3, 5).map((d) => (
<div className="product-card2">
<div className="incentive-card-text">
<h3>{d.title}</h3>
<p>{d.description}</p>
</div>
<div className="incentive-card-image">
<img src={d.image} alt="/" />
</div>
</div>
))}
</div>
</div>
样式代码是
.incentive-card {
margin-top: 80px;
}
.incentive-card-header h3 {
color: #454444;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
margin-bottom: 30px;
}
.incentive-card-header p {
color: #454444;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: center;
align-items: center;
justify-content: center;
padding: 0 20px 0 20px;
width: 769px;
margin-left: 20%;
}
.incentive-product-card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
padding: 0 5rem;
gap: 20px;
row-gap: 40px;
margin-top: 40px;
}
.incentive-card-text {
width: 350px;
height: 190px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
color: #121212;
border: 1px solid rgba(249, 194, 46, 1);
background: rgba(249, 194, 46, 1);
border-bottom: none;
padding-top: 25px;
}
.incentive-card-text:hover {
border: 1px solid #000;
background: #000;
color: rgba(249, 194, 46, 1);
}
.incentive-card-text h3 {
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
margin-bottom: 10px;
}
.incentive-card-text p {
font-family: Poppins;
font-size: 15px;
font-style: normal;
font-weight: 300;
line-height: 1.5;
text-align: center;
justify-content: center;
margin-top: 20px;
padding: 0 10px 0 10px;
}
.incentive-card-image img {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
width: 350px;
}
那么有人知道我如何复制第一张图片中显示的内容
嗯,我刚刚意识到我没有命名第二个产品卡div的div标签。 这样做有助于我相应地设计它的风格
这是调整后的代码
<div className="incentive-product-card-container">
{InData.slice(0, 3).map((d) => (
<div className="product-card2">
<div className="incentive-card-text">
<h3>{d.title}</h3>
<p>{d.description}</p>
</div>
<div className="incentive-card-image">
<img src={d.image} alt="/" />
</div>
</div>
))}
</div>
<div className="incentive-product-card-container2">
{InData.slice(3, 5).map((d) => (
<div className="product-card2">
<div className="incentive-card-text">
<h3>{d.title}</h3>
<p>{d.description}</p>
</div>
<div className="incentive-card-image">
<img src={d.image} alt="/" />
</div>
</div>
以及调整后的造型
.incentive-product-card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
padding: 0 5rem;
gap: 20px;
row-gap: 40px;
margin-top: 40px;
}
.incentive-product-card-container2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
transform: translateX(15%);
align-items: center;
padding: 0 5rem;
gap: 20px;
row-gap: 40px;
margin-top: 40px;
}