HTML で 2 つの div タグの間に垂直線を描く方法

最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 div 全体の高さに自動的に収まる必要がある (つまり、この垂直線の高さは 2 つの div のうち高い方の高さと同じ) という要件に遭遇しました。

通常、<hr> タグを使用して水平線を直接描画できますが、垂直線を描画しようとすると、タグが見つからないことがわかります。オンラインで情報を検索したところ、一般的には js を使用することを推奨しました。私は少し心配だったので、純粋な CSS を使用してこれを実行したいと考えていました。最終的に解決策を見つけました。以下に私のアプローチを共有します。

2 つの子 div の間に別の div を追加し、左 (右) の境界線が表示されるように設定し、padding-bottom | margin-bottom の正の値と負の値をオフセットするという原則を使用します。たとえば、 padding-bottom:1600px; margin-bottom:-1600px ; と設定すると、パディングは外側のレイヤータグを拡張するために使用され、マージンは外側のレイヤータグを拡張するために使用されないことがわかります。つまり、padding-bottom を使用すると、外側のラベルの高さが拡張され、外側のラベルは overflow:hidden; を使用して余分な高さを非表示にし、高さを最も高い列に揃えることができます。また、margin はモジュールのレイアウトに関連し、margin は padding によって拡張されたボックスをオフセットして、コンテンツ部分からレイアウトを開始することができます。

コードは次のとおりです:

体{  
    上マージン:100px;  
    左マージン:200px;  
}  
.maindiv{  
    幅:900ピクセル;  
    パディング:10px;  
    overflow:hidden; /*キー*/  
    border:1px 黒一色;  
}  
.leftdiv{  
    フロート:左;  
    幅:400ピクセル;  
    背景色:#CC6633;  
}  
.rightdiv{  
    フロート:右;  
    幅:400ピクセル;  
    背景色:#CC66FF;  
}  
.centerdiv{  
    フロート:左;  
    幅:50px;  
    border-right: 1px 破線の黒;  
    padding-bottom:1600px; /*キー*/  
    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">  
<ヘッド>  
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />  
<title>縦線描画</title>  
<link href="../css/demo.css" rel="スタイルシート" type="text/css" />  
</head>  
<本文>  
    <div class="maindiv">  
        <div class="leftdiv"><br><br><br><br><br><br><br><br></div>  
        <div class="centerdiv"></div>  
        <div class="rightdiv"><br><br><br><br><br><br><br><br><br></div>  
    </div>  
</本文>  
</html>

効果画像:

ちなみに、jsのアイデアとキーコードをいくつか書いておきます

2 つの子 div の高さを比較して、どちらが高いかを確認します。背の高い div の隣接する境界線が表示されるように設定することでも、これを実現できます。

以下はjsコードです

関数myfun(){  
  var div1 = document.getElementById("コンテンツ");  
  var div2 = document.getElementById("side");  
  var h1 = div1.offsetHeight;  
  var h2 = div2.offsetHeight;  
    h1>h2の場合{  
        div1.style.borderRight="1px 破線 #B6AEA3";  
    }それ以外{  
        div2.style.borderLeft="1px 破線 #B6AEA3";  
  }  
}

要約する

上記は、HTML で 2 つの div タグの間に垂直線を描く方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: 挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

>>: フロントエンドの面接の質問の最も包括的なコレクション