Buat reka letak dengan imej tetap di sebelah kiri, butang di sebelah kanan dan teks tengah atau tengah

Question

Saya sedang membuat susun atur pesanan makanan yang mengandungi imej di sebelah kiri, teks di tengah dan butang di sebelah kanan.

Imej dibetulkan ke kiri, tetapi butang bergerak berdasarkan panjang teks di tengah. Jadi saya ingin membetulkan reka letak ini:

Butang

juga akan dibetulkan ke kanan, sama seperti imej kiri, dan tidak bergantung pada panjang ujian tengah.

Jika teks lebih panjang, teks akan dialihkan ke baris seterusnya.

Senarai Makanan.js

import React daripada "react";
import "./Foodlist.css";
import { useStateValue } daripada "../../StateProvider";

fungsi Senarai Makanan({ id, tajuk, penilaian, imej, harga, maklumat, stok, tiada stok }) {
 
  const [{ bakul }, penghantaran] = useStateValue();

  // console.log("Ini ialah bakul >>>", bakul);


  const addToBasket = () =>
    // menghantar item ke dalam lapisan data
      penghantaran({
          jenis: "TAMBAH_KEPADA_BASKET",
          item: {
              saya telah lakukan,
              tajuk: tajuk,
              info: info,
              imej: imej,
              harga: harga,
              stok: stok,
              nostock: nostock,
              rating: rating,
          },
      });
  };


  kembali (
    <div className="makanan">
      <div className="food__details">
        <img src={imej} alt=""
        {/* <butang onClick={addToBasket} style={{fontWeight: "bold"}}>
          <gaya kuat={{fontSaiz: 20}}>+ </strong>
          Tambah
        </butang>
      </div>

      <div className="food__title">
        <div className="food__info__layout">
          <p style={{fontWeight: "tebal"}}>{title}</p>
          <p className="info__makanan">
            <kecil>¥ </kecil>
            <gaya kuat={{fontSaiz: 14 ,fontWeight: 100}}>{price}</strong>
          </p>
        </div>

        <butang onClick={addToBasket} style={{fontWeight: "bold"}}>
          <gaya kuat={{fontSaiz: 20}}>+ </strong>
          Tambah
        </butang>
        
      </div>
    </div>
  );
}

eksport Senarai Makanan lalai</pra>
<p><strong>Senarai Makanan.css</strong></p>
<pre class="brush:php;toolbar:false;">.food {
  paparan: flex;
  flex-direction: baris;
  warna latar belakang: telus;
  align-item: tengah;
  jidar: 5px;
}

.perincian_makanan{
  paparan: flex;
  flex-direction: baris;
}

.food__details > img {
  ketinggian maksimum: 100px;
  lebar: 120px;
  sesuai objek: mengandungi;
  jidar kanan: 10px;
  sempadan: 1px emas pepejal;
  jejari sempadan: 10px;
  limpahan: tersembunyi;
}

/* 
.food__details > butang {
  latar belakang: emas;
  sempadan: tiada;
  kursor: penunjuk;
  jejari sempadan: 5px;
  ketinggian: muat-kandungan;
  lebar: muat-kandungan;
} */


.food__info__layout {
  paparan: flex;
  flex-direction: lajur;
}

.info__makanan {
  paparan: flex;
  flex-direction: baris;
  ketinggian: auto;
  /* margin-bawah: 5px; */
}

.food__title {
  paparan: flex;
  flex-direction: baris;
}

.food__title > butang {
  latar belakang: emas;
  sempadan: tiada;
  kursor: penunjuk;
  jejari sempadan: 5px;
  ketinggian: muat-kandungan;
  lebar: muat-kandungan;
  jidar-kiri: 15px;
}

Answer 1

Untuk mempunyai imej di sebelah kiri dan butang di sebelah kanan, tanpa mengira panjang teks di antaranya, anda boleh menetapkan grid-template-columns: auto 1fr auto pembalut pada grid yang termasuk mereka sebagai kanak-kanak langsung.

Cari versi ringkas yang anda mahukan di bawah. Ambil perhatian bahawa saya memudahkan struktur HTML. Jika anda menyalin, jangan lupa tambahkan React's 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>