cari

Rumah  >  Soal Jawab  >  teks badan

Reka letak dua lajur dengan pemisah baris baharu

Saya sedang mencuba reka letak gaya majalah berbilang lajur untuk projek editorial.

Memandangkan saiz monitor terus meningkat, saya ingin memanfaatkan semua inci monitor yang tersedia dengan mencipta reka letak yang hampir sama dengan majalah kertas (dua hingga tiga lajur setiap halaman).

Saya menggunakan TipTap Editor untuk pengurusan pos (kerana ia mengembalikan kod HTML yang sangat bersih), dan pada bahagian hadapan saya mendapat output html berikut:

Saya menggunakan kelas lajur css untuk membahagikan artikel kepada dua bahagian:

article {
       columns: 2;
    }

Tetapi hasilnya begini:

Saya ingin membahagikan semua h2 kepada perenggan penyelesaian supaya saya boleh mengembangkan bab secara mendatar, seperti ini:

Adakah mungkin untuk memintas H2 menggunakan kelas pseudo?

P粉350036783P粉350036783336 hari yang lalu444

membalas semua(1)saya akan balas

  • P粉068486220

    P粉0684862202024-02-04 14:09:59

    Ia mungkin membantu untuk meletakkan setiap bab dalam div dan ia akan disusun di atas satu sama lain seperti hasil yang anda inginkan.

    HTML

    Chapter 1

    1.1 - The First

    ...

    ...

    1.2 - The Second

    ...

    1.3 - The Third

    ...

    Chapter 2

    2.1 - The First

    ...

    CSS

    .block {
      column-count:2;
      column-gap: 30px;
      margin: 20px 0 50px 0;
    }
    
    h2 {
      margin-top: 0;
    }

    Codepen: https://codepen.io/halfandhalfhd/pen/PoamByX

    balas
    0
  • Batalbalas