建立左側固定圖像、右側按鈕、中央或中間文字的佈局

Question

<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>

Answer 1

為了讓圖片位於左側，按鈕位於右側，無論中間文字的長度為何，您可以在網格上設定grid-template-columns: auto 1fr auto包含它們為直接子代的包裝器。

在下面找到您想要的簡化版本。請注意，我簡化了 HTML 結構。如果您複製過去，請不要忘記將 React 的 class 變更為 className。

.food {
  display: grid; 
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background-color: lightgrey;
}

.food > img {
  max-height: 100px;
  width: 120px;
  object-fit: cover;
  border: 1px solid gold;
  border-radius: 10px;
}

.food .food__title {
  margin-top: 0;
}

.food .food__button {
  background: gold; border: none; cursor: pointer;
  border-radius: 5px; font-weight: bold;
  padding: 0.5rem;
}

<div class="food">
  <img
    class="food__image"
    src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
    alt=""
  />

  <div class="food__desc">
    <h2 class="food__title">Lorem Ipsum is simply dummy text of the printing</h2>
    <p class="food__info">
      <small>₹ </small>
      <strong>12</strong>
    </p>
  </div>

  <button class="food__button">
    <strong>+ </strong>
    Add
  </button>
</div>