HTMLを使用して2つのdivタグの間に垂直線を引く方法-htmlチュートリアル-php.cn

HTMLを使用して2つのdivタグの間に垂直線を引く方法

不言

リリース： 2018-06-14 10:56:02

オリジナル

7564 人が閲覧しました

この記事では、HTML を使用して 2 つの div タグの間に垂直線を引く方法を主に紹介します。これは、必要な友人に参照してもらえるように共有します。、インターフェイスに垂直線を引く必要があり、この垂直線は親 p 全体の高さを自動的に占める必要があります。インターネット上で関連情報を確認し、最終的にその解決策を以下に共有します。最近、インターフェイスを描画しているときに、「垂直線を描画する」という要件に遭遇しました。この垂直線の高さは、親 p 全体を自動的に占める必要があります (つまり、この垂直線の高さは 2 つの p のうち高い方の高さと同じです)。

通常、水平線を描画し、ラベル

を使用します。垂直線を描画すると、ラベルが見つからないことがわかります。インターネットで情報を検索すると、一般的には js を使用することをお勧めします。私は偏執的で純粋な CSS を使用したいと考えていましたが、最終的に解決策を見つけました。以下に私のアプローチを共有します。

2つのサブpにもう1つのpを追加し、左(右)の境界線が表示されるように設定し、padding-bottom|margin-bottomの正の値と負の値を使用して相互にオフセットするという原則を使用します。。たとえば、

; を設定すると、パディングは外側のラベルを展開するために使用できますが、マージンは外側のラベルを展開するために使用されません。つまり、padding-bottom を使用して外側のラベルの高さを拡張すると、外側のラベルは overflow: hidden; を使用して余分な高さを非表示にし、高さを最も高い列に合わせてマージンを調整します。モジュールレイアウト、マージンはパディングをオフセットできます。拡張されたボックスにより、コンテンツセクションからレイアウトを開始できます。

以下はコードです:

padding-bottom:1600px; margin-bottom:-1600px

body{  
    margin-top:100px;  
    margin-left:200px;  
}  
.mainp{  
    width:900px;  
    padding:10px;  
    overflow:hidden; /*关键*/  
    border:1px solid black;  
}  
.leftp{  
    float:left;  
    width:400px;  
    background-color:#CC6633;  
}  
.rightp{  
    float:right;  
    width:400px;  
    background-color:#CC66FF;  
}  
.centerp{  
    float:left;  
    width:50px;  
    border-right: 1px dashed black;  
    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">  
<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>  
    <p class="mainp">  
        <p class="leftp"><br><br><br><br><br><br></p>  
        <p class="centerp"></p>  
        <p class="rightp"><br><br><br><br><br><br><br></p>  
    </p>  
</body>  
</html>

ログイン後にコピー

レンダリング:

ちなみに、jsのアイデアとキーコードを書き留めてください

2つのサブpの高さを比較してください。の方が高いです。この目的は、高い方の p の隣接する境界線を表示するように選択することによっても達成できます。

以下は js コードです

function myfun(){  
  var p1=document.getElementById("content");  
  var p2=document.getElementById("side");  
  var h1=p1.offsetHeight;  
  var h2=p2.offsetHeight;  
    if(h1>h2){  
        p1.style.borderRight="1px dashed #B6AEA3";  
    }else{  
        p2.style.borderLeft="1px dashed #B6AEA3";  
  }  
}

ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。