Блог

Я использую reactjs для создания простого апплета, отображающего некоторые изображения на веб-странице. Мой добрый вопрос заключается в том, как лучше всего расположить изображения «колба» и «колба2» вручную в нижней части страницы, как в этом примере, мой вывод выглядит следующим образом

это мое App.js

 import pipe from './img/pipette.png'; import './App.css'; import { useSpring , animated } from 'react-spring'; import { useDrag } from 'react-use-gesture'; import obj1 from './img/flask1.png' import obj2 from './img/flask2.png' import gradient from './img/gradient.jpg'    const stil = {  color: "orange",  backgroundColor: "aliceblue",  padding: "7px",  fontFamily: "Arial" };  function App() {  const logoPos = useSpring({x: 0, y: 0});  const bindLogoPos = useDrag ((params)=gt;{  logoPos.x.set(params.offset[0]);  logoPos.y.set(params.offset[1]);    });  return (  lt;div className="App"gt;  lt;header className="App-header"gt;  lt;divgt;  lt;p style={stil}gt;scara de culoare a turnesoluluilt;/pgt;  lt;/divgt;    lt;animated.div {...bindLogoPos()} style={{    y: logoPos.y,  x: logoPos.x,  }}gt;   lt;img src={pipe} className="App-logo" alt= "pipe" /gt;  lt;/animated.divgt;    lt;div className="gradient-container"gt;  lt;img src={gradient} width="175" className = "gradient" alt=""/gt;  lt;/divgt;  lt;img src={obj1} width="175" className = "flask" alt=""/gt;  lt;img src={obj2} width="175" className = "flask2" alt=""/gt;     lt;/headergt;  lt;/divgt;  ); }  export default App;