So zeichnen Sie mit HTML eine vertikale Linie zwischen zwei div-Tags-HTML-Tutorial-php.cn

So zeichnen Sie mit HTML eine vertikale Linie zwischen zwei div-Tags

不言

Freigeben： 2018-06-14 10:56:02

Original

7600 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich beschrieben, wie man mit HTML eine vertikale Linie zwischen zwei div-Tags zeichnet. Jetzt kann ich ihn mit Ihnen teilen.

Neueste Projekte Der Manager gab einen Auftrag, der das Zeichnen einer vertikalen Linie in der Benutzeroberfläche erforderte und die Höhe dieser vertikalen Linie benötigte, um automatisch das gesamte übergeordnete p einzunehmen. Ich habe die relevanten Informationen im Internet überprüft und sie schließlich erhalten. Freunde, die sie benötigen, können darauf verweisen.

Als ich kürzlich eine Schnittstelle zeichnete, stieß ich auf eine Anforderung eine vertikale Linie in der Schnittstellenlinie, und die Höhe dieser vertikalen Linie muss automatisch das gesamte übergeordnete p einnehmen (d. h. die Höhe dieser vertikalen Linie ist dieselbe wie die Höhe des höheren der beiden p).

Normalerweise zeichnen wir eine horizontale Linie und verwenden einfach die Beschriftung

. Wenn wir eine vertikale Linie zeichnen, stellen wir fest, dass die Beschriftung nicht gefunden werden kann. Nach der Suche nach Informationen im Internet wird generell die Verwendung von js empfohlen. Ich war paranoid und wollte reines CSS verwenden und habe schließlich eine Lösung gefunden, die ich unten mitteilen werde.

Fügen Sie ein weiteres p zu den beiden Sub-p hinzu, stellen Sie den linken (rechten) Rand so ein, dass er sichtbar ist, und verwenden Sie padding-bottom|margin-bottom, um ihn zu versetzen Prinzip der positiven und negativen Werte. Wenn wir beispielsweise padding-bottom:1600px; margin-bottom:-1600px festlegen, können wir es so verstehen: „padding“ kann zum Erweitern des äußeren Etiketts verwendet werden, aber „margin“ wird nicht zum Erweitern des äußeren Etiketts verwendet. Das heißt, wenn padding-bottom verwendet wird, um die Höhe der äußeren Beschriftung zu erweitern, verwendet die äußere Beschriftung overflow:hidden, um die überschüssige Höhe auszublenden, sodass die Höhe an der höchsten Spalte ausgerichtet werden kann und der Rand mit der verknüpft ist Modullayout und Rand können die Polsterung ausgleichen. Durch die gestreckte Box kann das Layout im Inhaltsbereich beginnen.

Das Folgende ist der Code:

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>

Nach dem Login kopieren

Rendering:

By the Way-JS-Ideen und Schlüsselcodes

Vergleichen Sie die Höhe der beiden Sub-Ps, welches höher ist. Sie können das Ziel auch erreichen, indem Sie den angrenzenden Rand des höheren p sichtbar machen.

Das Folgende ist der js-Code

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";  
  }  
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein . Weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie HTML, um das Rechtsklick-Menü und die Linksklick-Wischfunktion zu blockieren

HTML Verwirklichen Sie den Berichtseffekt der dynamischen Anzeige von Farbblöcken (Beispielcode)

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie mit HTML eine vertikale Linie zwischen zwei div-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!