React项目轮播：CSS实现图片对应文本及均匀间距问题

一、描述文本显示异常问题修复 #

问题原因 #

1. desc-container未设置overflow: hidden，导致所有描述段落同时可见
2. desc-display下的<p>标签没有设置min-width: 100%，无法占满容器宽度，所有段落挤在同一行

修改方案 #

1. 调整CSS样式

.desc-container {
    overflow: hidden; /* 隐藏超出容器的描述 */
    position: relative;
}

.desc-display p {
    padding: 0;
    min-width: 100%; /* 每个描述占满容器宽度 */
}

修改后，描述段落会和图片同步，每次仅显示当前索引对应的内容，切换时跟随平移。

二、固定段落间距实现（2个段落超出屏幕） #

问题原因 #

Flexbox的gap属性（相对单位）会随窗口大小变化，且无法精准匹配平移距离。

修改方案 #

通过固定margin+calc计算平移距离实现均匀固定间距：

1. 调整CSS样式

.desc-display {
    transition: 500ms ease;
    display: flex;
}

.desc-display p {
    padding: 0;
    min-width: 100%;
    margin-right: 2rem; /* 设置固定间距，可按需调整 */
}

/* 移除最后一个段落的右侧间距，避免多余空白 */
.desc-display p:last-child {
    margin-right: 0;
}

2. 修改React平移计算逻辑

更新desc-display的transform属性，将间距纳入平移计算：

<div 
    className="desc-display"
    style={{ transform: `translate(calc(-${card} * (100% + 2rem)))` }}
>
    {descDisplay}
</div>

原理说明 #

• 每个描述段落占满容器宽度，搭配固定右侧间距实现均匀分隔
• 使用calc()计算平移距离，确保每次切换时同步包含段落宽度与固定间距，实现精准位移

完整修改后代码片段 #

React组件部分 #

import { useState } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
    faChevronLeft, 
    faChevronRight, 
    faCircle 
} from '@fortawesome/free-solid-svg-icons';

import { faCircle as emptyCircle } from '@fortawesome/free-regular-svg-icons';

import smartbrain from '../../assets/smartbrain.png';
import clipz from '../../assets/clipz.png';
import crwn from '../../assets/crwn.png';

import './projects.styles.css';

const slides = [
    {
        id: 0,
        title: "smartbrain",
        image: smartbrain,
        desc: "smartbrain Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta exercitationem, sapiente voluptatum distinctio minima ratione eum sunt excepturi. Ipsum harum tenetur consequatur obcaecati iste! Ut aspernatur laudantium pariatur necessitatibus."
    },
    {
        id: 1,
        title: "clipz",
        image: clipz,
        desc: "clipz Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta exercitationem, sapiente voluptatum distinctio minima ratione eum sunt excepturi. Ipsum harum tenetur consequatur obcaecati iste! Ut aspernatur laudantium pariatur necessitatibus."
    },
    {
        id: 2,
        title: "crwn",
        image: crwn,
        desc: " crwn Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta exercitationem, sapiente voluptatum distinctio minima ratione eum sunt excepturi. Ipsum harum tenetur consequatur obcaecati iste! Ut aspernatur laudantium pariatur necessitatibus."
    }
]

const ProjectImages = () => {
    const [card, setCard] = useState(0);

    const previousCard = () => 
        setCard((card) => card === 0 ? slides.length - 1 : card - 1);

    const nextCard = () => 
        setCard((card) => card === slides.length - 1 ? 0 : card + 1);
    
    const cardDisplay = slides.map((item) => (
        <img key={item.id} src={item.image} alt={item.title} />
    ));

    const descDisplay = slides.map((words) => (
        <p key={words.id}>
            {words.desc}
        </p>
    ));

    return(
        <div className="information">
            <div className="image-container">
                <div 
                    className="image-display"
                    style={{ transform: `translate(-${card * 100}%)` }}
                >
                    {cardDisplay}
                </div>
                <div className="button-container">
                    <button onClick={previousCard}>
                        <FontAwesomeIcon icon={faChevronLeft} size="2xl" />
                    </button>
                    <button onClick={nextCard}>
                        <FontAwesomeIcon icon={faChevronRight} size="2xl" />
                    </button>
                </div>
                <div className="slide-container">
                    <div className="slide-dots" >
                        {slides.map((_, i) => (
                            card === i ? 
                            <FontAwesomeIcon icon={faCircle} /> 
                            : <FontAwesomeIcon icon={emptyCircle} /> 
                        ))}
                    </div>
                </div>
            </div>
            <div className="desc-container">
                <div 
                    className="desc-display"
                    style={{ transform: `translate(calc(-${card} * (100% + 2rem)))` }}
                >
                    {descDisplay}
                </div>
            </div>
        </div>
    )
}

export default ProjectImages;

CSS部分 #

.information {
    display: flex;
    flex-direction: column;
}

.image-container {
    overflow: hidden;
    position: relative;
}

.image-display {
    display: flex;
    transition: 500ms ease;
}

.image-display img {
    min-width: 100%;
}

.image-container .button-container {
    display: flex;
    justify-content: space-between;
    position: absolute;
    align-items: center;
    inset: 0;
}

.desc-container {
    overflow: hidden;
    position: relative;
}

.desc-display {
    transition: 500ms ease;
    display: flex;
}

.desc-display p {
    padding: 0;
    min-width: 100%;
    margin-right: 2rem;
}

.desc-display p:last-child {
    margin-right: 0;
}

.slide-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 1vh;
}

.slide-dots {
    display: flex;
    justify-content: center;
    transition: 500ms ease;
    gap: 0.5vw;
}

button {
    border: none;
    background-color: whitesmoke;
    border-radius: 50%;
    font-size: 1em;
    padding: .5em;
    margin: 0 .3em;
}

内容的提问来源于stack exchange，提问作者Jacob White