Maison > Questions et réponses > le corps du texte
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粉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