Ich erstelle ein Layout für eine Essensbestellung, das links ein Bild, in der Mitte Text und rechts eine Schaltfläche enthält.
Das Bild ist auf der linken Seite fixiert, aber die Schaltfläche bewegt sich entsprechend der Länge des Textes in der Mitte. Deshalb möchte ich dieses Layout korrigieren:
Die Schaltflächewird ebenfalls auf der rechten Seite fixiert, genau wie im linken Bild, und ist nicht von der mittleren Testlänge abhängig.
Wenn der Text länger ist, wird er in die nächste Zeile verschoben.
Foodlist.js
import React from "react"; import "./Foodlist.css"; import { useStateValue } from "../../StateProvider"; function Foodlist({ id, title, Rating, image, price, info, stock, nostock }) { const [{ Korb }, Versand] = useStateValue(); // console.log("Dies ist der Korb >>>", Korb); const addToBasket = () => // Versende das Element in die Datenschicht versenden({ Typ: "ADD_TO_BASKET", Artikel: { Ich tat, Titel: Titel, info: info, Bild: Bild, Preis: Preis, Lager: Lager, nostock: nostock, Bewertung: Bewertung, }, }); }; zurückkehren ( 
+ Hinzufügen {title}
¥ {price}
); } Standard-Lebensmittelliste exportieren Foodlist.css
.food { Anzeige: Flex; Flexrichtung: Reihe; Hintergrundfarbe: transparent; align-items: center; Rand: 5px; } .food__details{ Anzeige: Flex; Flexrichtung: Reihe; } .food__details > img { maximale Höhe: 100px; Breite: 120px; Objektanpassung: enthalten; Rand rechts: 10px; Rand: 1px massives Gold; Randradius: 10px; Überlauf versteckt; } /* .food__details > Taste { Hintergrund: Gold; Grenze: keine; Cursor: Zeiger; Randradius: 5px; Höhe: fit-content; Breite: fit-content; } */ .food__info__layout { Anzeige: Flex; Flexrichtung: Spalte; } .food__info { Anzeige: Flex; Flexrichtung: Reihe; Höhe: automatisch; /* margin-bottom: 5px; */ } .food__title { Anzeige: Flex; Flexrichtung: Reihe; } .food__title > Taste { Hintergrund: Gold; Grenze: keine; Cursor: Zeiger; Randradius: 5px; Höhe: fit-content; Breite: fit-content; Rand links: 15px; }
为了使图像位于左侧，按钮位于右侧，无论中间文本的长度如何，您可以在网格上设置
grid-template-columns: auto 1fr auto包含它们作为直接子代的包装器。在下面找到您想要的简化版本。请注意，我简化了 HTML 结构。如果您复制过去，请不要忘记将 React 的
class更改为className。.food { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: flex-start; padding: 1rem; background-color: lightgrey; } .food > img { max-height: 100px; width: 120px; object-fit: cover; border: 1px solid gold; border-radius: 10px; } .food .food__title { margin-top: 0; } .food .food__button { background: gold; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; padding: 0.5rem; }