Baru-baru ini, ketika saya menggambar sebuah antarmuka, saya menemukan persyaratan: menggambar garis vertikal di antarmuka, dan tinggi garis vertikal ini harus secara otomatis menempati seluruh div induk (yaitu, tinggi garis vertikal ini adalah sama sebagai tinggi kedua div). Yang lebih tinggi adalah tinggi yang sama).
Biasanya kita menggambar garis horizontal dan hanya menggunakan tag <hr>. Saat kita menggambar garis vertikal, ternyata tag tersebut tidak dapat ditemukan. Setelah mencari informasi di Internet, umumnya disarankan menggunakan js. Saya paranoid dan ingin menggunakan CSS murni untuk melakukannya, dan akhirnya menemukan solusinya. Saya akan membagikan pendekatan saya di bawah.
Tambahkan satu div lagi ke dua sub-div, atur batas kiri (kanan) agar terlihat, dan gunakan prinsip penggunaan nilai positif dan negatif padding-bottom|margin-bottom untuk saling mengimbangi. Misalnya, pengaturan padding-bottom:1600px; margin-bottom:-1600px ; kita dapat memahaminya sebagai: padding dapat digunakan untuk memperluas label luar tetapi margin tidak digunakan untuk memperluas label luar. Artinya, ketika padding-bottom digunakan untuk memperluas tinggi label luar, label luar menggunakan overflow:hidden; untuk menyembunyikan kelebihan tinggi, sehingga tinggi dapat sejajar dengan kolom tertinggi dan margin terkait dengan tata letak modul, dan margin dapat mengimbangi padding. Kotak yang diregangkan memungkinkan tata letak dimulai dari bagian konten.
Ini kodenya:
badan{ margin-atas:100px; margin-kiri:200px } .maindiv{ lebar:900px; padding:10px; overflow:hidden; /*key*/ border:1px hitam pekat; :400px; warna latar:#CC6633; } .rightdiv{ float:kanan; warna latar:#CC66FF; } .centerdiv{ float:kiri; lebar:50px; batas-kanan: 1px putus-putus hitam; padding-bawah:1600px; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transisi//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -Ketik content=text/html; charset=gb2312 /> <title>Metode menggambar garis vertikal</title> <link href=../css/demo.css rel=stylesheet tipe=teks/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br><br></div> <div kelas=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br></div> </div> </body> </html >Render:
Ngomong-ngomong, tuliskan ide dan kode kunci js
Bandingkan tinggi dua anak div mana yang lebih tinggi. Anda juga dapat mencapai tujuan tersebut dengan membuat batas yang berdekatan dari div yang lebih tinggi terlihat.
Berikut ini adalah kode js
fungsi myfun(){ var div1=document.getElementById(konten); var div2=document.getElementById(side); var h1=div1.offsetHeight; var h2=div2.offsetHeight; borderRight=1px putus-putus #B6AEA3; }lainnya{ div2.style.borderLeft=1px putus-putus #B6AEA3; MeringkaskanDi atas adalah perkenalan editor tentang cara menggambar garis vertikal antara dua tag div dalam HTML. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!