検索

ホームページ  >  に質問  >  本文

左側に固定画像、右側にボタン、中央または中央にテキストを配置するレイアウトを作成します。

<p>左側に画像、中央にテキスト、右側にボタンを含む食品注文のレイアウトを作成しています。 </p> <p>画像は左側に固定されていますが、中央のテキストの長さに応じてボタンが移動します。そこで、このレイアウトを修正したいと思います: </p> <p> ボタンも、左の画像と同じように右側に固定され、中央のテストの長さに依存しません。 </p> <p>テキストが長い場合、テキストは次の行に移動されます。 </p> <p><strong>Foodlist.js</strong></p> <pre class="brush:php;toolbar:false;">React を "react" からインポートします; import "./Foodlist.css"; import { useStateValue } from "../../StateProvider"; function Foodlist({ id, タイトル, 評価, 画像, 価格, 情報, 在庫, 在庫なし }) { const [{ バスケット }, ディスパッチ] = useStateValue(); // console.log("これはバスケットです >>>", バスケット); const addToBasket = () => { // 項目をデータ層にディスパッチします 急送({ タイプ: 「ADD_TO_BASKET」、 アイテム: { やった、 タイトル: タイトル、 情報: 情報、 画像: 画像、 価格: 価格、 在庫: 在庫、 ノーストック: ノーストック、 評価: 評価、 }、 }); }; 戻る ( <div className="食品"> <div className="food__details"> <img src={image} alt="" /> {/* <ボタン onClick={addToBasket} style={{fontWeight: "bold"}}> <strong style={{fontSize: 20}}> </strong> 追加 </ボタン> */} </div> <div className="food__title"> <div className="food__info__layout"> <p style={{fontWeight: "bold"}}>{title}</p> <p className="food__info"> <小>¥ <strong style={{fontSize: 14 ,fontWeight: 100}}>{価格}</strong> </p> </div> <ボタン onClick={addToBasket} style={{fontWeight: "bold"}}> <strong style={{fontSize: 20}}> </strong> 追加 </ボタン> </div> </div> ); } デフォルトの Foodlist</pre> をエクスポート <p><strong>Foodlist.css</strong></p> <pre class="brush:php;toolbar:false;">.food { ディスプレイ: フレックス; フレックス方向: 行; 背景色: 透明; 整列項目: 中央; マージン: 5px; } .food__詳細{ ディスプレイ: フレックス; フレックス方向: 行; } .food__詳細 >画像 { 最大高さ: 100ピクセル; 幅: 120ピクセル; オブジェクトフィット: 含む; 右マージン: 10px; 枠線: 1px 純金; 境界半径: 10px; オーバーフロー: 非表示; } /* .food__詳細 >ボタン { 背景: ゴールド; 境界線: なし。 カーソル: ポインタ; 境界半径: 5px; 高さ: フィットコンテンツ; 幅: コンテンツに合わせて; } */ .food__info__layout { ディスプレイ: フレックス; フレックス方向: 列; } .food__info { ディスプレイ: フレックス; フレックス方向: 行; 高さ: 自動; /* マージンボトム: 5px; */ } .food__title { ディスプレイ: フレックス; フレックス方向: 行; } .food__title >ボタン { 背景: ゴールド; 境界線: なし。 カーソル: ポインタ; 境界半径: 5px; 高さ: フィットコンテンツ; 幅: コンテンツに合わせて; 左マージン: 15px; }</pre></p>
P粉681400307P粉681400307446日前492

全員に返信(1)返信します

  • P粉593118425

    P粉5931184252023-09-05 11:24:56

    介在するテキストの長さに関係なく、左側に画像、右側にボタンを配置するには、グリッド上で grid-template-columns: auto 1fr auto を設定してそれらを含めることができます。直接の子ラッパーとして。

    必要な簡易バージョンを以下から見つけてください。 HTML 構造を簡略化していることに注意してください。コピーする場合は、React の classclassName に変更することを忘れないでください。

    リーリー リーリー

    返事
    0
  • キャンセル返事