28111 sujets

CSS et mise en forme, CSS3

[Résolu] CSS/ Mes 2 div ne se placent pas a la même hauteur!

upload/1597170724-80762-capture3.png Bonjour,
j'ais 2 div contenants diverses éléments que j'ais centré a l'aide d'une section et d'un text-align.
Le souci est que quoi que je fasse, ils ne se placent jamais a la même hauteur.
Quand ils sont vides, ca fonctionne mais des lors que je met des éléments dedans, sa ne fonctionne plus !
Voici mon code:
html :
<section class="cartes">
<div class="carte">
  <p class="guildname"><%= guild.name %></p>
  <p class="pre-on">Premium status :</p>
  <p class="on">ON</p>
  <p>Tu as une clé Premium?</p>
  <input class="inputcle" type="text" placeholder="Entrez votre clé premium">
  <button type="submit" class="confirmcle">Entrer</button>
</div>

  <div class="carte">
    <p class="card-title"><%= guild.name %></p>
    <p class="card-text"><%= guild.createdTimestamp %></p>
    <ul>
      <li class="list-group-item" ><strong>Propriétaire</strong> : <%= `${guild.owner.user.tag}` %></li>
      <li class="list-group-item"><strong>Membres</strong> : <i class="fa fa-fw fa-users" aria-hidden="true"></i> <%= `${guild.memberCount}` %> ( <%= `${guild.members.cache.filter(m => m.user.bot).size}` %> Bots )</li>
      <li class="list-group-item"><strong>Roles</strong> : <i class="fa fa-fw fa-users" aria-hidden="true"></i> <%= guild.roles.cache.size %></li>
      <li class="list-group-item"><strong>Salons</strong> : <i class="fa fa-fw fa-hashtag" aria-hidden="true"></i> <%= `${guild.channels.cache.filter(c => c.type === 'text').size}`%> <i class="fa fa-fw fa-microphone" aria-hidden="true"></i> <%= `${guild.channels.cache.filter(c => c.type === 'voice').size}`%></li>
    </ul>
  </div>

</section>


css :
/*2 div a coté*/
.cartes{text-align: center;height: 500px;}
.carte{background: #222;height: 200px;width: 250px;display: inline-block;padding: 0;margin: 0;}

Merci a tous ceux qui essayeront de m'aider ! Smiley biggrin
Modifié par AnderCSS (11 Aug 2020 - 20:38)
Modérateur
Bonjour,

Solution 1 : tu ajoutes un "vertical-align" à ".carte". Par exemple :
.carte
{
	background: #222;
	height: 200px;
	width: 250px;
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: top;
}


Solution 2 : tu ajoutes un "display:flex;" (et quelques autres instructions comme par exemple un "justify-content: center;" en fonction des besoins) à ".cartes". Et dans ce cas, on peut retirer le "display:inline-block;" de ".carte".
.cartes
{
	text-align: center;
	height: 500px;
	display: flex;
	justify-content: center;
}

.carte
{
	background: #222;
	height: 200px;
	width: 250px;
	padding: 0;
	margin: 0;
}

La solution 2 est un peu plus compliquée, mais plus souple à terme.

Amicalement,
Meilleure solution
Bonjour,
En effet j'ais ajouté hier un display flex et cela a fonctionné parfaitement et en plus sa permet d'etre responsive, un fardeau en moins Smiley cligne .
La premiere solution est bien aussi malgré le responsive a faire soi meme.
Merci a ceux qui m'ont aidé, parsimonhi et burbigo3.
Modifié par AnderCSS (12 Aug 2020 - 16:02)
Sujet clos
Aller à