Kata Pengantar: Dalam empat artikel sebelumnya, saya memperkenalkan prinsip Jiugongge dan kasus penerapannya. Ini telah berakhir, namun tata letak tersebut masih memiliki keterbatasan tertentu. Keterbatasan terbesarnya adalah tidak dapat menggunakan gambar dengan sudut membulat transparan. Sebagai metode tata letak antarmuka, jika sudut bulat luar transparan tidak dapat digunakan, skalabilitas tata letak ini akan sangat terpengaruh dan tata letak tidak dapat dimaksimalkan. Artikel ini bertujuan untuk memecahkan masalah ini secara mendasar.
Saya tahu akar penyebab masalah ini adalah kolom pembatas kiri dan kanan di tengah memiliki tinggi yang sama secara vertikal, karena wadah induknya adalah wadah total kotak, bukan wadah mandiri, dan wadah sudut kiri dan kanan di bagian atas. bagian bawahnya diimbangi secara negatif ke atas. Apa yang dipindahkan ke atasnya menghalangi warna latar belakang. Oleh karena itu, bila gambar pada wadah berbentuk bulat tersebut tembus cahaya atau transparan, maka bagian transparan tersebut akan menampilkan latar belakang gambar pada batas kiri dan kanan.
Saya telah menemukan masalah ini ketika membuat model sebelumnya dari " Tata Letak Kotak Sembilan Kotak yang Tidak Dapat Dipecahkan ". Pada saat itu, saya juga menggunakan gambar sudut membulat transparan untuk membuat gambar sudut membulat mengurangi kerumitannya, saya juga menggunakan gambar sudut bulat transparan. Bagian transparan dari potongan sudut bulat transparan ditambahkan dengan warna latar belakang yang sama dengan wadah utama untuk menghindari masalah ini. Namun metode ini pada akhirnya bukanlah solusi akhir. Dalam pekerjaan kita sehari-hari, perlu menggunakan sudut membulat yang tembus pandang untuk menyesuaikan antarmuka. Oleh karena itu, dalam artikel tersebut, metode ini hanya menghindari masalah tanpa menyelesaikan pertanyaan secara mendasar. Setelah artikelnya terbit, seorang teman yang perhatian akhirnya melontarkan pertanyaan ini setelah mencobanya. Haha, sepertinya saya tidak bisa menghindari masalah ini dengan bermalas-malasan.
Setelah Anda mengetahui sumber masalahnya, memperbaikinya adalah hal yang sederhana.
Karena artikel saya didasarkan pada artikel " Tata Letak Kotak Sembilan Gong yang Tidak Dapat Dipecahkan ", maka jika Anda belum membaca artikel tersebut, sebaiknya Anda membacanya terlebih dahulu, lalu membaca artikel ini. Ini akan membantu pencernaan Anda!
Tampaknya untuk mengatasi masalah ini, saya perlu melakukan beberapa perubahan struktural pada bagian tengah. Karena saya ingin border kiri dan kanannya sama tinggi secara vertikal dengan area konten, yaitu ketika tinggi konten teks di area konten berubah, tinggi batas kiri dan kanannya akan disesuaikan secara serempak. Ini adalah tata letak tiga kolom yang khas dengan ketinggian yang sama. Namun yang sedikit berbeda dengan layout tiga kolom yang biasa saya lihat adalah saya ingin lebar area konten tengah memenuhi seluruh lebar tengah, namun bukan 100% lebarnya, melainkan 100% dikurangi lebarnya. batas kolom kiri dan kanan. Dan lebar ini bukan persentase, semuanya memiliki nilai piksel tetap. Ini perlu diselesaikan dengan menggunakan metode yang saya sebutkan di artikel saya sebelumnya.
Untuk melakukan ini saya perlu mengubah struktur aslinya:
【Lapisan struktural】
Saya menambahkan container induk ke tiga container kiri, tengah dan kanan di tengah dan menentukan nama kelas tengah untuknya. Kemudian, struktur area tengah sekarang akan menjadi seperti ini:
Area konten< p>