Saya tidak boleh menetapkan imej kepada saiz yang sama berturut-turut menggunakan TailwindCSS
P粉978742405
P粉978742405 2024-02-17 12:27:00
0
1
421

Saya menggunakan TailwindCSS untuk mencipta reka bentuk halaman saya. Saya tidak boleh menetapkan komponen dan imej kepada saiz yang sama.

Saya telah mencuba beberapa kombinasi dengan flex, wrap, menukar lebar div atau imej, tetapi tidak dapat mencari penyelesaian. Hasil yang saya inginkan ialah setiap filem mengandungi segi empat tepat bersaiz sama yang mengandungi imej, imej bersaiz sama dengan nama berikut. Selain itu, untuk limpahan, saya mahu dapat menatalnya dalam skala x, tetapi bukan skala y. Saya berjaya melakukannya tetapi saya perlu menyimpannya dan mempunyai saiz yang betul juga.

Saya mahu imej dipaparkan seperti ini: (https://i.stack.imgur.com/16C7M.jpg) Tetapi sekarang mereka kelihatan seperti ini: (https://i.stack.imgur.com/8L0sD.png).

Kod untuk satu imej adalah sama untuk semua imej, hanya pautan ke imej dan namanya bertukar. Kod untuk imej:

<div
            class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-wrap duration-500 w-1/6"
          >
            <img
              src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg"
              alt="movie poster"
              class="rounded-t-[0.625rem] rounded-b-none w-full"
            />
            <div class="">
              <h1 class="text-xl font-normal">I am not okay with this</h1>
            </div>
          </div>

Kod sebelumnya disertakan dalam kod berikut:

<div class="container mx-auto">
      <div class="m-5">
        <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
        <div class="flex overflow-y-hidden overflow-x-scroll border-4">
        ....
        .... (put here the code for the images)
        ....
        </div>
     </div>
</div>

Terima kasih atas bantuan anda

P粉978742405
P粉978742405

membalas semua(1)
P粉270891688

Anda perlu menulis baris kod ini, di bawah ialah kod.

movie poster
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan