创建左侧固定图像、右侧按钮、中央或中间文本的布局

Question

我正在制作一个食品订单布局，其中左侧包含图像，中间包含文本，右侧用于添加按钮。

图像固定在左侧，但按钮根据中间文本长度移动。所以我想修复这个布局：

按钮也将固定在右侧，与左侧图像相同，并且不依赖于中间测试长度。

如果文本较长，则文本将移至下一行。

Foodlist.js

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

Foodlist.css

.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;
}

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>