Erstellen Sie ein Layout mit einem festen Bild auf der linken Seite, einer Schaltfläche auf der rechten Seite und zentriertem oder zentriertem Text

Question

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äche

wird 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 (
    <div className="food">
      <div className="food__details">
        <img src={image} alt=""
        {/* <button onClick={addToBasket} style={{fontWeight: "bold"}}>
          <strong style={{fontSize: 20}}>+ </strong>
          Hinzufügen
        </button>
      </div>

      <div className="food__title">
        <div className="food__info__layout">
          <p style={{fontWeight: "bold"}}>{title}</p>
          <p className="food__info">
            <small>¥ </small>
            <strong style={{fontSize: 14 ,fontWeight: 100}}>{price}</strong>
          </p>
        </div>

        <button onClick={addToBasket} style={{fontWeight: "bold"}}>
          <strong style={{fontSize: 20}}>+ </strong>
          Hinzufügen
        </button>
        
      </div>
    </div>
  );
}

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;
}

Answer 1

为了使图像位于左侧，按钮位于右侧，无论中间文本的长度如何，您可以在网格上设置 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;
}

<div class="food">
  <img
    class="food__image"
    src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
    alt=""
  />

  <div class="food__desc">
    <h2 class="food__title">Lorem Ipsum is simply dummy text of the printing</h2>
    <p class="food__info">
      <small>₹ </small>
      <strong>12</strong>
    </p>
  </div>

  <button class="food__button">
    <strong>+ </strong>
    Add
  </button>
</div>