Heim > Artikel > Web-Frontend > So setzen Sie Text in HTML nach unten
So setzen Sie Text in HTML nach unten
- 藏色散人Original
- 2021-02-25 11:28:4021089Durchsuche
So setzen Sie Text in HTML: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann einen Textinhalt im Hauptteil. Legen Sie dann das CSS-Attribut „position:relative“ im untergeordneten Element fest Element, das den Text speichert. Das Attribut ist „boottom:0“.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5 und CSS3, Dell G3-Computer
1 Wenn es sich um Text oder andere Elemente auf Blockebene handelt. Nutzen Sie Positionierungsideen. Position: absolut, dann Boottom: 0. Das übergeordnete Element sollte auf position: relative gesetzt werden.
Weil die absolute Positionierung relativ zum nächsten nicht statisch positionierten Element ist. Wenn jedoch mehrere Elemente innerhalb desselben übergeordneten Elements vorhanden sind und mit absoluter Positionierung verschoben werden müssen, müssen Sie sich darüber im Klaren sein, dass diese Elemente sich überlappen, anstatt normal wie Float angeordnet zu werden, wenn Sie dies direkt tun.
Das liegt daran, dass sie nach der Verwendung der absoluten Positionierung nach links vom übergeordneten Element verschoben werden, anstatt an der ursprünglichen Position zu bleiben.
Um diese Situation zu lösen, müssen Sie ein übergeordnetes Element für die zu verschiebenden Elemente verschachteln, sie von ihren übergeordneten Elementen positionieren lassen und relativ zu ihren übergeordneten Elementen festlegen, sodass das ursprüngliche übergeordnete Element zum übergeordneten Element wird .
Auf diese Weise kommt es nach dem Festlegen der absoluten Positionierung und der Positionsattribute zu keinem Überlappungseffekt, da sie sich innerhalb der Grenzen des übergeordneten Elements bewegen und nicht entkommen können. Auf diese Weise überlappt es nicht und bleibt nah am Boden, aber Sie müssen vorsichtig sein.
Das neue verschachtelte übergeordnete Element benötigt eine feste Höhe, die höher ist als das innere Element. Andernfalls würde seine Höhe durch interne Elemente gedehnt.
[Empfehlung: HTML-Video-Tutorial]
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#txt{
height:300px;
width:300px;
border:1px solid #333333;
text-align:center;
position:relative
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id=txt>
<p>文字靠下</p>
</div>
</body>
</html>Rendering:
2. Wenn es sich um Text handelt (ich habe noch keine Elemente auf Blockebene ausprobiert, können Sie es zu gegebener Zeit versuchen ). Dann müssen Sie das Div so einstellen, dass der Text so umbrochen wird, dass Folgendes angezeigt wird: Tabellenzelle + Vertikal: unten. Auf diese Weise wird der Text am unteren Rand des Div angehängt.
Beispiel:
HTML:
<div>文字在div的底部对齐</div>
CSS-Stil:
div{
width:200px;height:50px; /*设置div的大小*/
border:4px solid #beceeb; /*为了便于观察，显示出边框*/
display:table-cell;
vertical-align:bottom;
}Rendering:
Das obige ist der detaillierte Inhalt vonSo setzen Sie Text in HTML nach unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!