Vorem amet intuitive
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.
Rumah > Soal Jawab > teks badan
Saya mahu dua kotak pertama naik dengan lebar maksimum dan kotak kedua turun dengan lebar maksimum, berikut adalah kodnya.
Ini ialah kod CSS:
/* Start Services */ .services { padding-top: var(--section-pading); padding-bottom: var(--section-pading); } @media (min-widht: 768px) { .services .services-contianer { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); } } .services .box { display: flex; } .services .box i{ margin-right: 50px; } .services .box h3{ margin-bottom: 30px; color: var(--main-color); } .services .box p{ line-height: 2; } /* End Services */
Ini ialah kod HTML:
<!-- Start Services --> <div class="services"> <div class="container"> <div class="main-heading"> <h2>Services</h2> <p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt. </p> </div> <div class="services-container"> <div class="box"> <i class="fa-solid fa-display fa-3x"></i> <div class="text"> <h3>Vorem amet intuitive</h3> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.</p> </div> </div> </div> <div class="services-container"> <div class="box"> <i class="fa-solid fa-gear fa-3x"></i> <div class="text"> <h3>Vorem amet intuitive</h3> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.</p> </div> </div> </div> <div class="services-container"> <div class="box"> <i class="fa-solid fa-pen-ruler fa-3x"></i> <div class="text"> <h3>Vorem amet intuitive</h3> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.</p> </div> </div> </div> <div class="services-container"> <div class="box"> <i class="fa-solid fa-camera fa-3x"></i> <div class="text"> <h3>Vorem amet intuitive</h3> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.</p> </div> </div> </div> </div> </div> <!-- End Services -->
Inilah hasil yang saya dapat:
Masukkan penerangan imej di sini
Nak design macam gambar bawah ni, nak 2 kotak atas dan 2 bawah:
Masukkan penerangan imej di sini
Bolehkah anda membantu?
P粉1949190822024-04-04 15:59:41
Terdapat beberapa ralat dalam menambah gaya ini dalam kod ini.
Anda boleh memadamkan kod ini dan bukannya melakukan ini
@media (min-widht: 768px) { .services .services-contianer { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); } }
Dan tambahkan kod CSS ini harap anda boleh mencapai output yang anda inginkan
.container { display: flex; flex-wrap: wrap; } .services-container .box { width : 400px; min-width: 50%; }
P粉8632950572024-04-04 11:47:36
Apabila saya menyemak kod, terdapat kesilapan taip dalam kod CSS. Saya membuat beberapa perubahan pada kod HTML.
Sila semak kod yang dikemas kini di bawah:
/* Start Services */ .services { padding-top: var(--section-pading); padding-bottom: var(--section-pading); } @media (min-width: 768px) { .services .services-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); /* background-color: red; */ } } .services .box { display: flex; } .services .box i{ margin-right: 50px; } .services .box h3{ margin-bottom: 30px; color: var(--main-color); } .services .box p{ line-height: 2; } /* End Services */
Services
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt.
Vorem amet intuitive
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.
Vorem amet intuitive
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.
Vorem amet intuitive
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.
Vorem amet intuitive
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam.