我正在制作一个食品订单布局，其中左侧包含图像，中间包含文本，右侧用于添加按钮。

图像固定在左侧，但按钮根据中间文本长度移动。所以我想修复这个布局：

按钮也将固定在右侧，与左侧图像相同，并且不依赖于中间测试长度。

如果文本较长，则文本将移至下一行。

Foodlist.js

import React from "react"; import "./Foodlist.css"; import { useStateValue } from "../../StateProvider"; function Foodlist({ id, title, rating, image, price, info, stock, nostock }) { const [{ basket }, dispatch] = useStateValue(); // console.log("This is the basket >>>", basket); const addToBasket = () => { // dispatch the item into the data layer dispatch({ type: "ADD_TO_BASKET", item: { id: id, title: title, info: info, image: image, price: price, stock: stock, nostock: nostock, rating: rating, }, }); }; return ( 
 
  {/*  +  Add  */} 
 
 
 
{title}
 
 ₹  {price} 
 
  +  Add  
 
 ）； } 导出默认食物列表
Foodlist.css
      
.food { 显示：柔性； 弯曲方向：行； 背景颜色：透明； 对齐项目：居中； 边距：5 像素； } .食物__详细信息{ 显示：柔性； 弯曲方向：行； } .food__详情>图像{ 最大高度：100px； 宽度：120px； 对象适合：包含； 右边距：10px； 边框：1px纯金； 边框半径：10px； 溢出：隐藏； } /* .food__详情>按钮 { 背景：金色； 边框：无； 光标：指针； 边框半径：5px； 高度：适合内容； 宽度：适合内容； } */ .food__info__layout { 显示：柔性； 弯曲方向：列； } .food__info { 显示：柔性； 弯曲方向：行； 高度：自动； /* 底部边距: 5px; */ } .food__title { 显示：柔性； 弯曲方向：行； } .food__title > .food__title >按钮 { 背景：金色； 边框：无； 光标：指针； 边框半径：5px； 高度：适合内容； 宽度：适合内容； 左边距：15px； }