Buat reka letak dengan imej tetap di sebelah kiri, butang di sebelah kanan dan teks tengah atau tengah
<p>Saya sedang membuat susun atur pesanan makanan yang mengandungi imej di sebelah kiri, teks di tengah dan butang di sebelah kanan. </p>
<p>Imej dibetulkan ke kiri, tetapi butang bergerak berdasarkan panjang teks di tengah. Jadi saya ingin membetulkan reka letak ini: </p>
Butang <p> juga akan dibetulkan ke kanan, sama seperti imej kiri, dan tidak bergantung pada panjang ujian tengah. </p>
<p>Jika teks lebih panjang, teks akan dialihkan ke baris seterusnya. </p>
<p><strong>Senarai Makanan.js</strong></p>
<pre class="brush:php;toolbar:false;">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;
}</pre></p>