主页 / coding / 问题 / 79487838
Accepted
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2025-03-06 06:38:04 +0800 CST

我在 Tailwind 时间线上做错了什么，导致我的偶数项没有正确显示在线上？

  • 772

在 Tailwind CSS 版本 3.4.1 中尝试构建时间线，我想知道当我的辅助图标无法正确显示在线上时，我做错了什么。

代码：

import { ClipboardCheck, MessageSquare, Wrench, Car } from "lucide-react";

export default function TimelineExperiement() {
  const timeline = [
    {
      icon: <MessageSquare className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <ClipboardCheck className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Wrench className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Car className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className="flex flex-col md:flex-row items-center"
              >
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:order-2 md:pl-12 "
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md`}
                >
                  {tl.icon}
                </div>

                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "md:order-2" : "md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

我怎样才能让偶数项上的图标超出实线？

tailwind-css

2 个回答

  1. 说明问题

    const { useState, useEffect } = React;

function TimelineExperiement() {
  const timeline = [
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className="flex flex-col md:flex-row items-center"
              >
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:order-2 md:pl-12 "
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md`}
                >
                  {tl.icon}
                </div>

                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "md:order-2" : "md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<TimelineExperiement />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

    解决方案

    实际上，您有 3 个子元素。等式中出现问题是因为您错误地将文本放在了 上order-2。

    始终将图标放在 上order-2。将空 div 和文本 div 正确放在order-1或 上order-3。

    const { useState, useEffect } = React;

function TimelineExperiement() {
  const timeline = [
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className="flex flex-col md:flex-row items-center"
              >
                {/* TEXT - 1. order-1; 2. order-3 */}
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:order-3 md:pl-12 "
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                {/* ICON - order 2 */}
                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md md:order-2`}
                >
                  {tl.icon}
                </div>

                {/* EMPTY - 1. order-3; 2. order-1 */}
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "md:order-3" : "md:order-1 md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<TimelineExperiement />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

    • 0
  2. Best Answer

    作为替代解决方案，交换md:flex-row和md:flex-row-reverse类别可能比调整顺序更完美。

    const { useState, useEffect } = React;

function TimelineExperiement() {
  const timeline = [
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <div className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className={`flex flex-col items-center ${
                    /* HERE */
                    index % 2 === 0
                      ? "md:flex-row"
                      : "md:flex-row-reverse"
                  }`}
              >
                {/* TEXT */}
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:pl-12"
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                {/* ICON */}
                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md`}
                >
                  {tl.icon}
                </div>

                {/* EMPTY */}
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "" : "md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<TimelineExperiement />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

    • 0

相关问题