React 和 Tailwind CSS 样式用于制作特殊的卡片组件

Question

这就是我想用React做的，它是一个项目组件：

我尝试了各种方法来做到这一点，但似乎无法找到正确的帮助文档。我也在努力使用

next/image

，以确保它的尺寸正确。

这是我到目前为止所得到的。

const Project = ({ image, titile, description, technologies }) => {
  return (
    <div className="relative w-full h-64 bg-white">
      <Image fill src={"/placeholder.jpg"} />
      <div className="absolute w-[50%] h-8 bg-green-500 top-10 -left-10">
        Express, MongoDB, Node.js, React.js
      </div>
      <p>Project #2</p>
      <p>Blah blah blahs</p>
    </div>
  );
};

它看起来像这样：

Answer 1

您希望内部 div 溢出到包装 div 左侧 10px。

这应该有效：

export function App() {
  return (
    <div style={{ height: '200px',width:"400px", backgroundColor: 'lightgray', padding: '10px', position: 'relative' }}>
      <div style={{ height: '10px', backgroundColor: 'blue', position: 'absolute', left: '-10px', width: 'calc(100% + 10px)' }}></div>
    </div>

  );
}

你可以在这个反应游乐场进行测试

• 内部 div 的

  left

  属性设置为 -10px，使其从包装器 div 左边缘左侧开始 10 个像素。

• width 属性设置为 calc(100% + 10px) 以确保内部 div 跨越包装器 div 的整个宽度加上左侧额外的 10 个像素。