Créez une mise en page avec une image fixe à gauche, un bouton à droite et un texte central ou centré

Question

Je crée une présentation de commande de repas qui contient une image à gauche, du texte au milieu et un bouton à droite.

L'image est fixée à gauche, mais le bouton se déplace en fonction de la longueur du texte au milieu. Je souhaite donc corriger cette mise en page :

Le bouton

sera également fixé à droite, comme sur l'image de gauche, et ne dépendra pas de la longueur médiane du test.

Si le texte est plus long, il sera déplacé vers la ligne suivante.

Foodlist.js

importer React depuis "react" ;
importer "./Foodlist.css";
importer { useStateValue } depuis "../../StateProvider" ;

function Foodlist({ id, title, rating, image, price, info, stock, nostock }) {
 
  const [{ panier }, dispatch] = useStateValue();

  // console.log("Ceci est le panier >>>", panier);


  const addToBasket = () =>
    // envoie l'élément dans la couche de données
      expédition({
          tapez : "ADD_TO_BASKET",
          article: {
              je l'ai fait,
              titre : titre,
              infos : infos,
              image : image,
              prix : prix,
              stock: stock,
              pas de stock : pas de stock,
              note : note,
          },
      });
  } ;


  retour (
    <div className="nourriture">
      <div className="food__details">
        <img src={image} alt="" />
        {/* <button onClick={addToBasket} style={{fontWeight : "bold"}}>
          <strong style={{fontSize: 20}}>+ </strong>
          Ajouter
        </bouton> */}
      </div>

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

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

exporter la liste des aliments par défaut

Foodlist.css

.food {
  affichage : flexible ;
  direction flexible : rangée ;
  couleur d'arrière-plan : transparent ;
  align-items : centre ;
  marge : 5px ;
}

.food__détails{
  affichage : flexible ;
  direction flexible : rangée ;
}

.food__details > img {
  hauteur maximale : 100 px ;
  largeur : 120 px ;
  object-fit : contenir ;
  marge droite : 10 px ;
  bordure : 1px en or massif ;
  rayon de bordure : 10 px ;
  débordement caché;
}

/* 
.food__details > bouton {
  fond : or ;
  bordure : aucune ;
  curseur : pointeur ;
  rayon de bordure : 5 px ;
  hauteur : contenu ajusté ;
  largeur : ajustement du contenu ;
} */


.food__info__layout {
  affichage : flexible ;
  direction flexible : colonne ;
}

.food__info {
  affichage : flexible ;
  direction flexible : rangée ;
  hauteur : automatique ;
  /* marge inférieure : 5px ; */
}

.food__titre {
  affichage : flexible ;
  direction flexible : rangée ;
}

.food__title > bouton {
  fond : or ;
  bordure : aucune ;
  curseur : pointeur ;
  rayon de bordure : 5 px ;
  hauteur : contenu ajusté ;
  largeur : ajustement du contenu ;
  marge gauche : 15 px ;
}

Answer 1

Pour avoir l'image à gauche et le bouton à droite, quelle que soit la longueur du texte entre les deux, vous pouvez définir grid-template-columns: auto 1fr auto un wrapper sur la grille qui les inclut comme enfants directs.

Trouvez ci-dessous la version simplifiée que vous souhaitez. Notez que j'ai simplifié la structure HTML. Si vous copiez, n'oubliez pas d'ajouter les 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>