Heim > Fragen und Antworten > Hauptteil
Ich versuche, die Elementanordnung über den Rastervorlagenbereich zu erreichen, aber es funktioniert nicht. Ich versuche, ein Rastersystem zu verwenden, um Blöcke vertikal und horizontal anzuordnen. Benutzen Sie das Bild links und den Text auf der anderen Seite. Warum funktioniert dieser Code nicht?
.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"; }
<div class="news__wrapper"> <div class="news__item"> <div class="news__item-image"></div> <div class="news__item-content"> <h4 class="news__item-title"> Lorem, </h4> <p class="news__item-text"> Lorem ipsum </p> </div> </div> <div class="news__item"> <div class="news__item-image" :style="imageNews1"></div> <div class="news__item-content"> <h4 class="news__item-title"> Lorem, </h4> <p class="news__item-text"> Lorem </p> </div> </div> <div class="news__item"> <div class="news__item-image" :style="imageNews1"></div> <div class="news__item-content"> <h4 class="news__item-title"> Lorem, </h4> <p class="news__item-text"> Lorem ips </p> </div> </div> </div>
https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css
P粉5133181142023-09-10 14:58:12
当您使用grid-template-areas
时,您需要将grid-area
值分配给网格内的元素。
简而言之,添加以下 css
代码将达到预期的结果:
.news__item:first-child { grid-area: a; } .news__item:nth-child(2) { grid-area: b; } .news__item:nth-child(3) { grid-area: c; }