建立左側固定圖像、右側按鈕、中央或中間文字的佈局
<p>我正在製作一個食品訂單佈局，其中左側包含圖像，中間包含文本，右側用於添加按鈕。 </p>
<p>圖像固定在左側，但按鈕根據中間文字長度移動。所以我想修復這個佈局：</p>
<p>按鈕也將固定在右側，與左側影像相同，且不依賴中間測試長度。 </p>
<p>如果文字較長，則文字將移至下一行。 </p>
<p><strong>Foodlist.js</strong></p>
<pre class="brush:php;toolbar:false;">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 (
<div className="food">
<div className="food__details">
<img src={image} alt="" />
{/* <button onClick={addToBasket} style={{fontWeight: "bold"}}>
<strong style={{fontSize: 20}}> </strong>
Add
</button> */}
</div>
<div className="food__title">
<div className="food__info__layout">
<p style={{fontWeight: "bold"}}>{title}</p>
<p className="food__info">
<small>₹ </small>
<strong style={{fontSize: 14 ,fontWeight: 100}}>{price}</strong>
</p>
</div>
<button onClick={addToBasket} style={{fontWeight: "bold"}}>
<strong style={{fontSize: 20}}> </strong>
Add
</button>
</div>
</div>
）；
}
匯出默認食物清單
<p><strong>Foodlist.css</strong></p>
.food {
顯示：柔性；
彎曲方向：行；
背景顏色：透明；
對齊項目：居中；
邊距：5 像素；
}
.食物__詳細資料{
顯示：柔性；
彎曲方向：行；
}
.food__詳情>圖像{
最大高度：100px；
寬度：120px；
物件適合：包含；
右邊距：10px；
邊框：1px純金；
邊框半徑：10px；
溢出：隱藏；
}
/*
.food__詳情>按鈕 {
背景：金色；
邊框：無；
遊標：指針；
邊框半徑：5px；
高度：適合內容；
寬度：適合內容；
} */
.food__info__layout {
顯示：柔性；
彎曲方向：列；
}
.food__info {
顯示：柔性；
彎曲方向：行；
高度：自動；
/* 底部邊距: 5px; */
}
.food__title {
顯示：柔性；
彎曲方向：行；
}
.food__title > .food__title >按鈕 {
背景：金色；
邊框：無；
遊標：指針；
邊框半徑：5px；
高度：適合內容；
寬度：適合內容；
左邊距：15px；
}</pre></p>