左側に画像、中央にテキスト、右側にボタンを含む食品注文のレイアウトを作成しています。

画像は左側に固定されていますが、中央のテキストの長さに応じてボタンが移動します。そこで、このレイアウトを修正したいと思います:

ボタンも、左の画像と同じように右側に固定され、中央のテストの長さに依存しません。

テキストが長い場合、テキストは次の行に移動されます。

Foodlist.js

React を "react" からインポートします; import "./Foodlist.css"; import { useStateValue } from "../../StateProvider"; function Foodlist({ id, タイトル, 評価, 画像, 価格, 情報, 在庫, 在庫なし }) { const [{ バスケット }, ディスパッチ] = useStateValue(); // console.log("これはバスケットです >>>", バスケット); const addToBasket = () => { // 項目をデータ層にディスパッチします 急送（{ タイプ: 「ADD_TO_BASKET」、 アイテム： { やった、 タイトル: タイトル、 情報: 情報、 画像: 画像、 価格: 価格、 在庫: 在庫、 ノーストック: ノーストック、 評価: 評価、 }、 }); }; 戻る （ 
 
  {/*
      <ボタン onclick="{addToBasket}" style="{{fontWeight:" "bold"}}>
         追加  */} 
 
 
 
{title}
 

       <小>
        ¥
       {価格} 
 
 <ボタン onClick={addToBasket} style={{fontWeight: "bold"}}>   追加  
 
 ); } デフォルトの Foodlist

Foodlist.css

.food { ディスプレイ: フレックス; フレックス方向: 行; 背景色: 透明; 整列項目: 中央; マージン: 5px; } .food__詳細{ ディスプレイ: フレックス; フレックス方向: 行; } .food__詳細 >画像 { 最大高さ: 100ピクセル; 幅: 120ピクセル; オブジェクトフィット: 含む; 右マージン: 10px; 枠線: 1px 純金; 境界半径: 10px; オーバーフロー: 非表示; } /* .food__詳細 >ボタン { 背景: ゴールド; 境界線: なし。 カーソル: ポインタ; 境界半径: 5px; 高さ: フィットコンテンツ; 幅: コンテンツに合わせて; } */ .food__info__layout { ディスプレイ: フレックス; フレックス方向: 列; } .food__info { ディスプレイ: フレックス; フレックス方向: 行; 高さ: 自動; /* マージンボトム: 5px; */ } .food__title { ディスプレイ: フレックス; フレックス方向: 行; } .food__title >ボタン { 背景: ゴールド; 境界線: なし。 カーソル: ポインタ; 境界半径: 5px; 高さ: フィットコンテンツ; 幅: コンテンツに合わせて; 左マージン: 15px; }