<p>Je crée une présentation de commande de repas qui contient une image à gauche, du texte au milieu et un bouton à droite. </p> <p>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 : </p> Le bouton <p> sera également fixé à droite, comme sur l'image de gauche, et ne dépendra pas de la longueur médiane du test. </p> <p>Si le texte est plus long, il sera déplacé vers la ligne suivante. </p> <p><strong>Foodlist.js</strong></p> <pre class="brush:php;toolbar:false;">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</pre> <p><strong>Foodlist.css</strong></p> <pre class="brush:php;toolbar:false;">.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 ; }</pre></p>

.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>