เมื่อเร็วๆ นี้ เมื่อฉันวาดอินเทอร์เฟซ ฉันพบข้อกำหนด: วาดเส้นแนวตั้งในอินเทอร์เฟซ และความสูงของเส้นแนวตั้งนี้จะต้องครอบครอง div หลักทั้งหมดโดยอัตโนมัติ (นั่นคือ ความสูงของเส้นแนวตั้งนี้จะเท่ากัน เป็นความสูงของทั้งสอง div) อันที่สูงกว่าคือความสูงเท่ากัน)
โดยปกติแล้วเราจะวาดเส้นแนวนอนแล้วใช้แท็ก <hr> เมื่อเราวาดเส้นแนวตั้ง เราจะพบว่าไม่พบแท็กนั้น หลังจากค้นหาข้อมูลบนอินเทอร์เน็ตแล้ว โดยทั่วไปแนะนำให้ใช้ js ฉันหวาดระแวงและต้องการใช้ CSS เพียงอย่างเดียว และในที่สุดก็พบวิธีแก้ปัญหา ฉันจะแบ่งปันแนวทางของฉันด้านล่าง
เพิ่ม div อีกหนึ่งตัวให้กับ div ย่อยทั้งสอง ตั้งค่าเส้นขอบด้านซ้าย (ขวา) ให้มองเห็นได้ และใช้หลักการของการใช้ค่าบวกและค่าลบของ padding-bottom|margin-bottom เพื่อชดเชยซึ่งกันและกัน ตัวอย่างเช่น การตั้งค่า padding-bottom:1600px; margin-bottom:-1600px ; เราสามารถเข้าใจได้ว่า padding สามารถใช้เพื่อขยายเลเบลด้านนอกได้ แต่ระยะขอบไม่ได้ใช้เพื่อขยายเลเบลด้านนอก นั่นคือเมื่อใช้ช่องว่างภายในเพื่อขยายความสูงของป้ายกำกับด้านนอก ป้ายกำกับด้านนอกจะใช้โอเวอร์โฟลว์: ซ่อนไว้ เพื่อซ่อนความสูงส่วนเกินเพื่อให้สามารถจัดตำแหน่งความสูงให้สอดคล้องกับคอลัมน์สูงสุดได้ และระยะขอบจะสัมพันธ์กับ เค้าโครงโมดูล และระยะขอบสามารถชดเชยช่องว่างภายใน กล่องที่ยืดออกช่วยให้เค้าโครงเริ่มต้นจากส่วนเนื้อหา
นี่คือรหัส:
body{ margin-top:100px; margin-left:200px; } .maindiv{ ความกว้าง:10px; :400px; สีพื้นหลัง:#CC6633; } .rightdiv{ float:right; สีพื้นหลัง:#CC66FF; } .centerdiv{ float:left; width:50px; border-right: 1px dashed black; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -พิมพ์ content=text/html; charset=gb2312 /> <title>วิธีการวาดเส้นแนวตั้ง</title> <link href=../css/demo.css rel=stylesheet ประเภท=ข้อความ/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br><br></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br></div> </div> </body> </html >การแสดงผล:
อย่างไรก็ตาม ให้เขียนแนวคิดและรหัสคีย์ของ js
เปรียบเทียบความสูงของ div ลูกสองตัวซึ่งอันใดสูงกว่า คุณยังสามารถบรรลุเป้าหมายได้โดยเลือกให้มองเห็นเส้นขอบที่อยู่ติดกันของ div ที่สูงกว่า
ต่อไปนี้เป็นโค้ดของ js
ฟังก์ชั่น myfun(){ var div1=document.getElementById(content); var div2=document.getElementById(side); var h1=div1.offsetHeight; var h2=div2.offsetHeight; borderRight=1px ประ #B6AEA3; div2.style.borderLeft=1px ประ #B6AEA3; สรุปข้างต้นคือคำแนะนำของบรรณาธิการเกี่ยวกับวิธีวาดเส้นแนวตั้งระหว่างแท็ก div สองแท็กใน HTML ฉันหวังว่าจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!