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

Comment placer une div/carte comme celle-ci ?

J'ai du mal à positionner un div comme celui de la photo.

<div class="cards" id="cards">
      <div class="container">
        <div class="single">
          <span class="dot"></span>
        </div>
        <div class="single">


          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
      </div>
    </div>

J'ai essayé quelque chose comme ça mais j'ai du mal à le styliser et à le positionner en utilisant CSS.

Un seul div porte le nom des deux premières cartes/divs. Le deuxième div est nommé la deuxième carte/div vers le bas.

P粉218775965P粉218775965430 Il y a quelques jours503

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

  • P粉680087550

    P粉6800875502023-09-09 11:38:16

    CSS Grid peut vous aider avec ces types de mises en page. Étudiez le code ci-dessous pour voir comment disposer les boîtes en fonction du modèle.

    Assurez-vous de regarder de plus près la section suivante sur MDN à propos de 网格模板区域 : Laisser les cellules de la grille vides

    div {
      border: 1px solid black;
    }
    .strategy {
      grid-area: strategy;
    }
    .efficient {
      grid-area: efficient;
    }
    .fast {
      grid-area: fast;
    }
    .reliable {
      grid-area: reliable;
    }
    .wrapper {
      width: 500px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-template-areas:
        "fast efficient ." /* 3 cols: fast / efficient / . === empty col */
        ". strategy reliable";
    }
    <section class="wrapper">
      <div class="fast">Fast</div>
      <div class="efficient">Efficient</div>
      <div class="strategy">Strategy</div>
      <div class="reliable">Reliable</div>
    </section>

    Ressources : Guide complet de la grille CSS

    répondre
    0
  • Annulerrépondre