左側に画像、中央にテキスト、右側にボタンを含む食品注文のレイアウトを作成しています。
画像は左側に固定されていますが、中央のテキストの長さに応じてボタンが移動します。そこで、このレイアウトを修正したいと思います:
ボタンも、左の画像と同じように右側に固定され、中央のテストの長さに依存しません。
テキストが長い場合、テキストは次の行に移動されます。
Foodlist.js
React を "react" からインポートします; import "./Foodlist.css"; import { useStateValue } from "../../StateProvider"; function Foodlist({ id, タイトル, 評価, 画像, 価格, 情報, 在庫, 在庫なし }) { const [{ バスケット }, ディスパッチ] = useStateValue(); // console.log("これはバスケットです >>>", バスケット); const addToBasket = () => { // 項目をデータ層にディスパッチします 急送({ タイプ: 「ADD_TO_BASKET」、 アイテム: { やった、 タイトル: タイトル、 情報: 情報、 画像: 画像、 価格: 価格、 在庫: 在庫、 ノーストック: ノーストック、 評価: 評価、 }、 }); }; 戻る (をエクスポート); } デフォルトの Foodlist{/* <ボタン onclick="{addToBasket}" style="{{fontWeight:" "bold"}}> 追加 ボタン> */}
<ボタン onClick={addToBasket} style={{fontWeight: "bold"}}> 追加 ボタン>{title}
<小> ¥ 小>{価格}
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; }ボタン>
介在するテキストの長さに関係なく、左側に画像、右側にボタンを配置するには、グリッド上で
grid-template-columns: auto 1fr auto
を設定してそれらを含めることができます。直接の子ラッパーとして。必要な簡易バージョンを以下から見つけてください。 HTML 構造を簡略化していることに注意してください。コピーする場合は、React の
class
をclassName
に変更することを忘れないでください。