1
votes

Je ne sais pas pourquoi cela arrive à mes éléments de bloc en ligne

Je suis assez nouveau dans le CSS et dans le code suivant, mon plan était de créer 3 éléments div et de les styliser. Voici mon code:

Mes codes:

<body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>
  </div>
</body>

.box {
  background: orange;
  width: 30%;
  height: 250px;
  margin: 0 1%;
  display: inline-block;
}

Avec juste le code ci-dessus, le résultat est ce que je veux

Cependant, dès que j'essaye d'ajouter du texte à l'intérieur de mes éléments div dans le HTML, les cases se désalignent:

Quelqu'un peut-il expliquer la raison de cela? Et dites-moi comment résoudre ce problème? J'apprécierais toute aide!

html css display

0 commentaires

3 Réponses :

-1
votes

Essayez ceci au début de votre fichier css:

* {
    box-sizing:border-box;
}

1 commentaires

Cela ne l'a pas résolu car mes éléments div n'ont pas de marges / rembourrages, etc.

1
votes

Ajoutez vertical-align: top .box

<body>
    <div class="container">
      <div class="box">
        fhgf
      </div>
      <div class="box">

      </div>
      <div class="box">

      </div>
    </div>
  </body>

.box {
  background: orange;
  width: 30%;
  height: 250px;
  margin: 0 1%;
  display: inline-block;
  vertical-align:top;
}

vertical-align:top;

1 commentaires

Hé, merci pour ça. Cela a fonctionné, mais pouvez-vous expliquer pourquoi le problème se produisait en premier lieu? Par exemple, pourquoi dois-je utiliser cela?

1
votes

J'utilise simplement la grid box pour gérer votre problème et vous pouvez également utiliser flex box à la place

<body>
  <div class="container">
    <div class="box">
      hello
    </div>
    <div class="box">

    </div>
    <div class="box">

    </div>
  </div>
</body>

  .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  background: orange;
  width: 90%;
  height: 250px;
  margin: 0 1%;

2 commentaires

Merci mec, je voulais connaître le problème avec mon propre code comme objectif d'apprentissage mais toujours merci pour cela!

un problème a été répertorié dans la première fois et je vous montre l'autre façon de gérer cette erreur et si vous le trouvez, vous aidez à voter, sinon, voter contre