<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>
);
}
export default Foodlist</pre>
<p><strong>Foodlist.css</strong></p>
<pre class="brush:php;toolbar:false;">.food {
display: flex;
flex-direction: row;
background-color: transparent;
align-items: center;
margin: 5px;
}
.food__details{
display: flex;
flex-direction: row;
}
.food__details > img {
max-height: 100px;
width: 120px;
object-fit: contain;
margin-right: 10px;
border: 1px solid gold;
border-radius: 10px;
overflow: hidden;
}
/*
.food__details > button {
background: gold;
border: none;
cursor: pointer;
border-radius: 5px;
height: fit-content;
width: fit-content;
} */
.food__info__layout {
display: flex;
flex-direction: column;
}
.food__info {
display: flex;
flex-direction: row;
height: auto;
/* margin-bottom: 5px; */
}
.food__title {
display: flex;
flex-direction: row;
}
.food__title > button {
background: gold;
border: none;
cursor: pointer;
border-radius: 5px;
height: fit-content;
width: fit-content;
margin-left: 15px;
}</pre></p>
为了使图像位于左侧,按钮位于右侧,无论中间文本的长度如何,您可以在网格上设置
grid-template-columns: auto 1fr auto
包含它们作为直接子代的包装器。在下面找到您想要的简化版本。请注意,我简化了 HTML 结构。如果您复制过去,请不要忘记将 React 的
class
更改为className
。