최근에 인터페이스를 그릴 때 인터페이스에 수직선을 그리고 이 수직선의 높이가 자동으로 전체 상위 div를 차지해야 한다는 요구 사항에 직면했습니다. 즉, 이 수직선의 높이는 동일해야 합니다. 두 div의 높이) 더 높은 div의 높이가 동일합니다.
일반적으로 우리는 수평선을 그리는데 <hr> 태그만 사용합니다. 수직선을 그리면 태그를 찾을 수 없습니다. 인터넷에서 정보를 검색한 후에는 일반적으로 js를 사용하는 것이 좋습니다. 나는 편집증이 있었고 순수한 CSS를 사용하고 싶었고 마침내 해결책을 찾았습니다. 아래에서 내 접근 방식을 공유하겠습니다.
두 개의 sub-div에 div를 하나 더 추가하고, 왼쪽(오른쪽) 테두리가 보이도록 설정하고, padding-bottom|margin-bottom의 양수와 음수 값을 서로 상쇄시키는 원리를 이용합니다. 예를 들어 padding-bottom:1600px; margin-bottom:-1600px 설정하면 패딩은 외부 레이블을 확장하는 데 사용할 수 있지만 여백은 외부 레이블을 확장하는 데 사용되지 않습니다. 즉, padding-bottom을 사용하여 외부 레이블의 높이를 확장하는 경우 외부 레이블은 Overflow:hidden을 사용하여 초과 높이를 숨기므로 높이가 가장 높은 열과 정렬될 수 있습니다. 모듈 레이아웃 및 여백은 패딩을 상쇄할 수 있습니다. 늘어난 상자를 사용하면 레이아웃이 콘텐츠 섹션에서 시작될 수 있습니다.
코드는 다음과 같습니다.
body{ margin-top:100px; margin-left:200px; } .maindiv{ 너비:900px; 패딩:10px; /*key*/ border:1px 솔리드 블랙; :400px; 배경색:#CC6633; } .rightdiv{ float:right:400px; background-color:#CC66FF; } .centerdiv{ float:left; width:50px; border-right: 1px 점선 검정색; /*key*/ margin-bottom:-1600px; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -Type content=text/html; charset=gb2312 /> <title>세로 선 그리기 방법</title> <link href=../css/demo.css rel=stylesheet type=text/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의 코드입니다.
function myfun(){ var div1=document.getElementById(content); var div2=div1.offsetHeight; if(h1>h2){ div1.style. borderRight=1px 점선 #B6AEA3 }else{ div2.style.borderLeft=1px 점선 #B6AEA3 } } 요약위 내용은 HTML에서 두 개의 div 태그 사이에 수직선을 그리는 방법에 대한 편집자의 소개입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!