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:

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 ( 
 
  +  Tambah  
 
 
 
{title}
 
 ¥  {price} 
 
  +  Tambah  
 
 ); } eksport Senarai Makanan lalai 
Senarai Makanan.css
 
.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; }