如何在反应中定位组件？

Question

我使用了一个组件在 div 中渲染图像，并希望在下面标记的位置显示多个这样的图像，但由于绝对定位无法做到这一点我该如何解决这个问题。下面是我的代码 css.

import React from "react";

const ProductFront = () => {
  return (
    <div className="cont ml-64 mt-60 absolute w-4/5  border border-black ">
      <div classname="products relative w-full bg-black h-auto">
        <div className="card mt-16 float-left h-64 w-1/5 border border-black">
          <img
            classname="w-full h-64"
            src="https://scontent.fktm10-1.fna.fbcdn.net/v/t39.30808-6/262512378_628365955279273_4012995638484466373_n.jpg?_nc_cat=107&_nc_rgb565=1&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=ioxL_kR8x-wAX9SbEac&_nc_ht=scontent.fktm10-1.fna&oh=30b60b2a763ab6d63259208f282c8d49&oe=61B10257"
          />
          <div classname="product-info mt-4 ml-4">
            <span classname="product-name">abc</span>
            <h3 classname="price">300</h3>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductFront;

从“react”导入 React；从“./ProductFront”导入 ProductFront；

const ProductList = () => {
  return (
    <div>
      <ProductFront />
      <ProductFront />
    </div>
  );
};

export default ProductList;

虽然我使用的是 tailwind css，但它在 css 中的翻译如下。 css->

.cont{
margin-left:16rem;
margin-top:15rem;
border-color:black;
poistion:absolute;
width:80%;
}

.products{
positon:relative;
width:100%;
height:auto;
}


.card{
margin-top:16;
float:left;
heigh:16rem;
width:10%
border-color:black;

我正在 App.jsx 中呈现组件 ProductList。

Answer 1

我认为您想做的是使用例如 flexbox, which is made for precisely this sort of thing. You probably want something like this 查看 flexbox, which is made for precisely this sort of thing. You probably want something like this justify-content: space-around 应用于父级 div。

根据您提供的 CSS，看起来 img 父级有 className=card（实际上，您写了 classname，小写 n，这是不正确的！JSX 总是使用 camelCase)。因此，编辑 .card 以包括 display: flex; justify-content: space-around;，以及您希望它具有的任何其他属性。

如果您想了解更多详细信息，请提供一个有效的最小示例，例如codesandbox.io. Here is a react template 您可以将其用作起点。提供一个例子可以让社区准确地看到你在做什么，并进行更细粒度的调整来帮助你实现你想要的。您的代码中有大量拼写错误，例如你在 CSS 中同时说 poistion 和 positon，哪个都不正确（你正在寻找 position），所以可以肯定地说你的代码已经复制进来的不能按原样工作。这使得提供具体帮助变得困难。

即是说，我已经为您提供了工具，让您可以在这里做您想做的事。请阅读有关 flexbox 的内容，如果您还有具体问题可以清楚地表达出来，社区将很乐意回答。

Answer 2

您的 className 属性在几个 <div> 上不正确。你有它的类名，重要的是 React。 https://reactjs.org/docs/dom-elements.html#style

如何在反应中定位组件？

How can I position a component in react?

css

reactjs

tailwind-css