<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>
为了使图像位于左侧,按钮位于右侧,无论中间文本的长度如何,您可以在网格上设置
grid-template-columns: auto 1fr auto
包含它们作为直接子代的包装器。在下面找到您想要的简化版本。请注意,我简化了 HTML 结构。如果您复制过去,请不要忘记将 React 的
class
更改为className
。