创建左侧固定图像、右侧按钮、中央或中间文本的布局
<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>