Pour créer quatre carrés avec des coins arrondis et les aligner sur la même ligne en HTML et CSS, vous pouvez utiliser la flexbox pour l'alignement. Voici un exemple de code pour atteindre cet objectif :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quatre Carrés Alignés</title>
<style>
.container {
display: flex;
justify-content: space-around; /* Espace uniformément autour des éléments */
align-items: center; /* Centrer les éléments verticalement */
height: 100vh; /* Optionnel: pour centrer verticalement sur toute la page */
}
.carre {
width: 100px; /* Largeur de chaque carré */
height: 100px; /* Hauteur de chaque carré */
background-color: #3498db; /* Couleur du carré (bleu) */
border-radius: 15px; /* Bord arrondi */
margin: 10px; /* Espacement entre les carrés, optionnel */
}
</style>
</head>
<body>
<div class="container">
<div class="carre"></div>
<div class="carre"></div>
<div class="carre"></div>
<div class="carre"></div>
</div>
</body>
</html>
Voici le résultat :
HTML : Nous avons un conteneur div avec la classe container qui contient quatre div enfants de la classe carre. Chaque div représente un carré.
CSS :
.container utilise display: flex; pour créer un conteneur flex, alignant ses enfants sur une ligne. justify-content: space-around; et align-items: center; assurent un alignement horizontal et vertical harmonieux..carre applique les styles pour la taille et l'apparence de chaque carré, notamment border-radius: 15px; pour rendre les coins arrondis.margin: 10px; est optionnel mais peut aider à espacer les carrés les uns des autres. Ajustez cette valeur si nécessaire.Vous pouvez ajuster les dimensions, les couleurs, et le rayon d'arrondissement selon vos besoins.