recherche

Maison  >  Questions et réponses  >  le corps du texte

protocole de boîte en grille en CSS

Je veux que les deux premières cases montent avec une largeur maximale et que la deuxième case descende avec une largeur maximale, voici le code.

Voici le code 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  */

Voici le code 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 -->

Voici le résultat que j'ai obtenu :

Entrez la description de l'image ici

Je veux que le design ressemble à l'image ci-dessous, je veux 2 cases en haut et 2 en bas :

Entrez la description de l'image ici

Pouvez-vous aider ?

P粉334721359P粉334721359264 Il y a quelques jours513

répondre à tous(2)je répondrai

  • P粉194919082

    P粉1949190822024-04-04 15:59:41

    Il y a quelques erreurs lors de l'ajout de ce style dans ce code.

    Vous pouvez supprimer ce code au lieu de faire cela

    @media (min-widht: 768px) {
        .services .services-contianer {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        }
    }

    Et ajoutez ce code CSS en espérant que vous pourrez obtenir le résultat souhaité

    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .services-container .box {
      width : 400px;
      min-width: 50%;
    }

    répondre
    0
  • P粉863295057

    P粉8632950572024-04-04 11:47:36

    Lorsque j'ai vérifié le code, il y avait des fautes de frappe dans le code CSS. J'ai apporté quelques modifications au code HTML.

    Erreur d'orthographe :

    Veuillez vérifier le code mis à jour ci-dessous :

    /* 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.

    répondre
    0
  • Annulerrépondre