Bagaimana untuk Span Div Merentasi Berbilang Baris dan Lajur Tanpa Grid CSS atau Jadual HTML?

Cara Menjangkau Div Merentasi Berbilang Baris dan Lajur Tanpa Grid CSS atau Jadual HTML

Selalunya, kami menghadapi tugas untuk mencipta reka letak seperti grid dengan elemen yang merangkumi berbilang baris dan lajur. Walau bagaimanapun, menggunakan Grid CSS atau Jadual HTML mungkin bukan pendekatan yang diingini. Artikel ini menyediakan penyelesaian bukan grid bukan jadual.

Pertimbangkan coretan yang menampilkan baris lima elemen, dengan matlamat meletakkan elemen yang lebih besar di tengah. Menggunakan paparan: sifat blok sebaris, kita boleh mencapai reka letak mendatar:

<code class="css">#wrapper {
  width: 516px;
}

.block {
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}</code>

Tetapi bagaimana kita mengendalikan rentang menegak?

Walau bagaimanapun, pada 2017, penyemak imbas utama mengeluarkan kemas kini dengan sokongan penuh untuk CSS Grid Layout, menyediakan penyelesaian yang mudah. Dengan menggunakan paparan: sifat grid, kami boleh membuat reka letak grid tanpa mengubah HTML atau menambah bekas bersarang:

<code class="css">#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}</code>

Untuk merentangi elemen merentas berbilang baris dan lajur, kami menggunakan baris grid dan lajur grid sifat:

<code class="css">.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}</code>

Oleh itu, kami mencapai reka letak grid dengan elemen yang merangkumi berbilang baris dan lajur, tanpa menggunakan Jadual HTML atau Grid CSS.

Atas ialah kandungan terperinci Bagaimana untuk Span Div Merentasi Berbilang Baris dan Lajur Tanpa Grid CSS atau Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!