Penjelasan mendetail tentang solusi tata letak html adaptif tengah lebar kiri dan kanan

Artikel ini memperkenalkan penjelasan mendetail tentang html tengah tetap lebar kiri dan kanan">solusi tata letak html adaptif dan membagikannya kepada semua orang, sebagai berikut:

Struktur htmlnya adalah sebagai berikut

 <div class=box> <div class=left>kiri</div> <div class=right>kanan</div> <div class=center>center</div></div> //Hati-hati dulu di sini elemen mengambang kiri dan kanan dirender sebelum elemen tengah dirender. Setelah elemen diapungkan, elemen tingkat blok saudara yang tersisa akan menempati lebar elemen induk <style> .box{ height:200px; } .left{ float:left:300px; ; lebar:300 piksel;

Struktur htmlnya adalah sebagai berikut

 <div class=box> <div class=left>kiri</div> <div class=right>kanan</div> <div class=center>center</div></div> //Sama seperti tata letak mengambang, pertama-tama render elemen kiri dan kanan sehingga posisinya berada di ujung kiri dan kanan elemen induk, dan elemen tengah yang tersisa menempati sisa lebar elemen induk. <gaya> .kotak{ posisi: relatif; } .kiri{ posisi: mutlak; lebar: 100 piksel; kiri: 0; } .kanan{ lebar: 100 piksel; ; latar belakang: merah; }</gaya>

Menempatkan elemen induk display:table dan elemen anak display:table-cell akan mengubahnya menjadi blok sebaris.

Keuntungan dari tata letak ini adalah kompatibilitas yang baik.

 <div class=box> <div class=left> kiri </div> <div class=center> tengah </div> <div class=right> kanan </div></div><style> .box{ tampilan : tabel; lebar: 100%; } .kiri{ tampilan: sel tabel; lebar: 100 piksel; kiri: 0; } .kanan{ lebar: 100 piksel; 100%; latar belakang: merah;

Tampilan elemen induk: elemen anak fleksibel semuanya akan disusun dalam satu baris.

Lebar flex:n pada elemen anak akan menjadi lebar elemen induk/n

Misalnya flex:1, lebarnya sama dengan tinggi elemen induk.

Kerugian dari tata letak elastis adalah kompatibilitasnya yang tidak tinggi. Saat ini, browser IE tidak dapat menggunakan tata letak elastis.

 <div class=box> <div class=left> kiri </div> <div class=center> tengah </div> <div class=right> kanan </div></div><style> .box{ tampilan : fleksibel; lebar: 100%; } .kiri{ lebar: 100 piksel; kiri: 0; } .kanan{ lebar:100 piksel;

Tampilan elemen induk: kisi;

kolom templat kisi:100px otomatis 100px;

Secara berurutan, elemen anak pertama memiliki lebar 100 piksel, elemen anak kedua adaptif, dan elemen anak ketiga berukuran 100 piksel;

Keuntungan tata letak grid adalah sangat sederhana dan ditentukan langsung oleh gaya elemen induk.

 <div class=box> <div class=left> kiri </div> <div class=center> tengah </div> <div class=right> kanan </div></div><style> .box{ tampilan : kisi; kolom templat kisi: 100 piksel otomatis lebar 100 piksel: 100%;

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.