简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pourquoi l'affichage de la grille à l'aide d'une zone de modèle de grille ne fonctionne-t-il pas ?
P粉541796322
P粉541796322 2023-09-09 16:28:13
0
1
509

J'essaie d'implémenter la disposition des éléments via la zone de modèle de grille, mais cela ne fonctionne pas. J'essaie d'utiliser un système de grille pour disposer les blocs verticalement et horizontalement. Utilisez l’image de gauche et le texte de l’autre côté. Pourquoi ce code ne fonctionne-t-il pas ?

.news__wrapper { display: grid; grid-template-areas: "a a c" "b b c"; } .news__item { display: flex; align-items: center; justify-content: center; } .news__item-image { width: 349px; height: 360px; } .news__item-image { background: "url(https://place-hold.it/300x500) 50% 50% no-repeat"; }
 
 
 
 
 Lorem, 
 
 Lorem ipsum 
 
 
 
 
 
 
 Lorem, 
 
 Lorem 
 
 
 
 
 
 
 Lorem, 
 
 Lorem ips

https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css

P粉541796322
P粉541796322

répondre à tous (1)
P粉513318114
P粉5133181142023-09-10 14:58:12 1 plancher

Lorsque vous utilisezgrid-template-areas时，您需要将grid-area, les valeurs sont attribuées aux éléments de la grille.
En bref, l'ajout du codecsssuivant permettra d'obtenir le résultat souhaité :

.news__item:first-child { grid-area: a; } .news__item:nth-child(2) { grid-area: b; } .news__item:nth-child(3) { grid-area: c; }
Comme+0
Ajouter une réponse
    Sujets populaires
    Plus>
    Articles populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！