Rumah  >  Soal Jawab  >  teks badan

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>
P粉681400307P粉681400307435 hari yang lalu486

membalas semua(1)saya akan balas

  • P粉593118425

    P粉5931184252023-09-05 11:24:56

    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>

    balas
    0
  • Batalbalas