cari

Rumah  >  Soal Jawab  >  teks badan

Mengapa memaparkan grid menggunakan kawasan templat grid tidak berfungsi?

Saya cuba melaksanakan susunan elemen melalui kawasan templat grid tetapi ia tidak berfungsi. Saya cuba menggunakan sistem grid untuk menyusun blok secara menegak dan mendatar. Gunakan gambar di sebelah kiri dan teks di sebelah yang lain. Mengapa kod ini tidak berfungsi?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.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";

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<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粉541796322P粉541796322491 hari yang lalu752

membalas semua(1)saya akan balas

  • P粉513318114

    P粉5133181142023-09-10 14:58:12

    Apabila anda menggunakan grid-template-areas时,您需要将grid-area nilai diberikan kepada elemen dalam grid.
    Ringkasnya, menambah kod css berikut akan mencapai hasil yang diingini:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    .news__item:first-child {

      grid-area: a;

    }

    .news__item:nth-child(2) {

      grid-area: b;

    }

    .news__item:nth-child(3) {

      grid-area: c;

    }

    balas
    0
  • Batalbalas