最近、インターフェイスを描画しているときに、要件に遭遇しました。インターフェイスに垂直線を描画し、この垂直線の高さが親 div 全体を自動的に占める必要があります (つまり、この垂直線の高さは同じです)。 2 つの div の高さとして)、高い方が同じ高さです)。
通常、水平線を描画し、タグ <hr> を使用します。垂直線を描画すると、タグが見つからないことがわかります。インターネットで情報を検索すると、一般的には js を使用することをお勧めします。私は偏執的で純粋な CSS を使用したいと考えていましたが、最終的に解決策を見つけました。以下に私のアプローチを共有します。
2 つのサブ div にもう 1 つの div を追加し、左 (右) 境界線が表示されるように設定し、padding-bottom|margin-bottom の正の値と負の値を使用して相互にオフセットするという原則を使用します。たとえば、 padding-bottom:1600px; margin-bottom:-1600pxを設定すると、padding は外側のラベルの展開に使用できますが、margin は外側のラベルの展開には使用されません。つまり、padding-bottom を使用して外側のラベルの高さを拡張すると、外側のラベルは overflow:hidden; を使用して余分な高さを非表示にし、高さを最も高い列に合わせてマージンを調整します。モジュール レイアウト、マージンはパディングをオフセットできます。拡張されたボックスにより、コンテンツ セクションからレイアウトを開始できます。
コードは次のとおりです。
body{ margin-top:100px; margin-left:200px; .maindiv{ width:900px; overflow:hidden; /*key*/ border:1px; :400px; 背景色:#CC6633; }背景色:#CC66FF; } .centerdiv{ float:left; width:50px; 境界線-bottom:1600px; /*key*/ } <!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; <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のアイデアとキーコードをメモしておきます
2 つの子 div の高さを比較し、どちらが高いかを比較します。より高い div の隣接する境界線を表示することによっても、目標を達成できます。
以下はjsのコードです
関数 myfun(){ var div1=document.getElementById(content); var h1=div1.offsetHeight; if(h1>h2); borderRight=1px 破線 #B6AEA3; }else{ div2.style.borderLeft=1px 破線 #B6AEA3;要約する上記は、HTML で 2 つの div タグの間に垂直線を引く方法についてのエディターの紹介です。ご質問があれば、メッセージを残してください。エディターがすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！