如何使用Tailwind & CSS创建交替垂直时间线

Question

我试图创建一个时间线，在一个反应应用程序中，将奇怪的孩子放在时间线的左边，偶数的孩子在右边。图像显示：

​

我认为我遇到的问题是，我正在循环中使用它。因此，对于循环中的每一项，我希望它显示在左边或右边，这取决于子项是偶数还是奇数。我尝试过使用Tailwind的变体实用程序，用于奇数和偶数，但我无法配置它。我也尝试使用简单的CSS，但不能让它替代。

/project.js

return (
        <div className="antialiased text-gray-800 bg-gray-100">
            <div className="container relative flex flex-col px-6 mx-auto space-y-8">
                <div className="absolute inset-0 z-0 w-2 h-full bg-white shadow-md left-17 md:mx-auto md:right-0 md:left-0"></div>
                {projectData && projectData.map((project, index)=> (
                <div className="relative z-10">
                    <img src={project.mainImage.asset.url} alt={project.mainImage.alt} className="timeline-img" />
                    <div id="container" className="timeline-container">
                        <div id="pointer" className="timeline-pointer" aria-hidden="true"></div>
                        <div className="p-6 bg-white rounded-md shadow-md">
                            <p className="pt-1">{project.description}</p>
                        </div>
                    </div>
                </div>    
                ))}
            </div>
        </div>
    )

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

#container:nth-child(odd) {
    @apply timeline-container-left timeline-container;
}

#pointer:nth-child(odd) {
    @apply timeline-pointer timeline-pointer-left;
}

@layer components {
    .timeline-img {
        @apply object-cover w-24 h-24 border-4 border-white rounded-full shadow-md xs:absolute md:mx-auto md:left-0 md:right-0;
    }
    .timeline-container {
        @apply relative pt-2 xs:pl-28 xs:pt-0 md:w-1/2 md:ml-auto md:pl-16;
    }
    .timeline-container-left {
        @apply md:ml-0 md:mr-auto md:pl-0 md:pr-16;
    }
    .timeline-pointer {
        @apply absolute inset-0 w-4 h-4 transform rotate-45 bg-white left-10 xs:top-11 xs:left-26 md:left-14;
    }
    .timeline-pointer-left {
        @apply md:left-auto md:right-14;
    }
}

我只需要申请

@apply timeline-container-left

和

@apply timeline-pointer-left

到容器和指针div上。

Answer 1

我认为您可以引用每个项的索引，并在className内的三元操作符中使用它，如果索引模2返回0，则表示它是偶数，就像<div className={`${index % 2 == 0 ? "ml-auto" : "mr-auto" }`}>一样。