Блог

Я использовал компонент для рендеринга изображения в 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=107amp;_nc_rgb565=1amp;ccb=1-5amp;_nc_sid=8bfeb9amp;_nc_ohc=ioxL_kR8x-wAX9SbEacamp;_nc_ht=scontent.fktm10-1.fnaamp;oh=30b60b2a763ab6d63259208f282c8d49amp;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.

Я думаю, что вы хотите проверить flexbox, который создан именно для такого рода вещей. Вы, вероятно, хотите что-то подобное, используя, например justify-content: space-around , применяется к родительскому div элементу.

С точки зрения предоставленного вами CSS, это выглядит так, как будто у img родителя есть className=card (на самом деле, вы написали classname со строчной n буквы, что неверно! JSX всегда использует camelCase). Поэтому отредактируйте .card , чтобы включить display: flex; justify-content: space-around; , в дополнение к любым другим свойствам, которые вы хотите, чтобы он имел.

Если вы хотите получить более подробную информацию, пожалуйста, предоставьте рабочий минимальный пример, например codesandbox.io . Вот шаблон react, который вы можете использовать в качестве отправной точки. Предоставление примера позволяет сообществу точно видеть, что вы делаете, и вносить более мелкие изменения, чтобы помочь вам достичь того, чего вы хотите. В вашем коде много опечаток, например, вы говорите и poistion то, и другое, и positon в вашем CSS ни то, ни другое не является правильным (вы ищете position ), поэтому можно с уверенностью сказать, что код, который вы скопировали, не работает как есть. Это затрудняет предоставление конкретной помощи.

Тем не менее, я предоставил вам инструменты для выполнения того, что вы хотите здесь. Пожалуйста, ознакомьтесь с flexbox, а затем, если у вас все еще есть конкретные вопросы, которые вы можете сформулировать, сообщество будет радо на них ответить.

Ваш атрибут className неверен в паре <div> «s». У вас есть его classname, важно реагировать. https://reactjs.org/docs/dom-elements.html#style