左側に固定画像、右側にボタン、中央または中央にテキストを配置するレイアウトを作成します。
P粉681400307
2023-09-04 21:02:34
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
介在するテキストの長さに関係なく、左側に画像、右側にボタンを配置するには、グリッド上で
grid-template-columns: auto 1fr autoを設定してそれらを含めることができます。直接の子ラッパーとして。必要な簡易バージョンを以下から見つけてください。 HTML 構造を簡略化していることに注意してください。コピーする場合は、React の
classをclassNameに変更することを忘れないでください。