suchen

Heim  >  Artikel  >  Web-Frontend  >  Können zwei HTML5-Divs in einer Zeile platziert werden?

Können zwei HTML5-Divs in einer Zeile platziert werden?

青灯夜游
青灯夜游Original
2022-04-25 17:32:443436Durchsuche

HTML5-Div-Elemente können standardmäßig nicht zu zweit in einer Zeile platziert werden. div ist ein Element auf Blockebene, das standardmäßig nicht in derselben Zeile angezeigt werden kann. Sie können dem div-Element jedoch den Stil „display: inline;“ hinzufügen Element, sodass mehrere Divs in derselben Zeile angezeigt werden können.

Können zwei HTML5-Divs in einer Zeile platziert werden?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

HTML5-div-Elemente können standardmäßig nicht zu zweit in einer Zeile platziert werden.

div ist ein Element auf Blockebene und ein Element belegt eine eigene Zeile. Daher können standardmäßig nicht zwei Divs in derselben Zeile angezeigt werden.

Können zwei HTML5-Divs in einer Zeile platziert werden?

Das Hauptmerkmal von Elementen auf Blockebene besteht darin, dass sie eine eigene Zeile belegen.

Die Hauptmerkmale von Elementen auf Blockebene sind wie folgt:

  • Unabhängig davon, ob das Zeilenumbruch-Tag wird verwendet oder nicht, Elemente auf Blockebene befinden sich immer in einer neuen Zeile.

  • Die Breite, Höhe, Ränder und der Abstand von Elementen auf Blockebene können alle gesteuert werden Ein Element auf Blockebene wird weggelassen, seine Breite entspricht standardmäßig dem aktuellen Browserfenster. Die Breite von

  • Elementen auf Blockebene kann andere Inline-Elemente und Elemente auf Blockebene enthalten.

  • Aber Sie können das Anzeigeattribut verwenden, um Elemente auf Blockebene in Inline-Elemente umzuwandeln, sodass mehrere Divs in derselben Zeile angezeigt werden können.
Die Hauptmerkmale von Inline-Elementen sind wie folgt:

Inline-Elemente und andere Elemente werden in derselben Zeile angezeigt;

  • Die Breite, Höhe, Ränder und Polsterung von Inline-Elementen können nicht geändert werden

  • Die Breite eines Inline-Elements entspricht der Breite seines Inhalts und kann nicht geändert werden.

  • Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen.

    • Elemente auf Blockebene in Inline-Elemente umwandeln

Setzen Sie in Elementen auf Blockebene ein, um Elemente auf Blockebene in Inline-Elemente umzuwandeln.

Beispiel: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
div{
background-color: #FFC0CB;
margin: 10px;
}
.box {
display: inline;
}
</style>
</head>
<body>
<div>一个div元素，块级元素</div>
<div>一个div元素，块级元素</div>
<div>一个div元素，转为了行内元素</div>
<div>一个div元素，转为了行内元素</div>
</body>
</html>
display：inline;

(Lernvideo-Sharing:

CSS-Video-TutorialKönnen zwei HTML5-Divs in einer Zeile platziert werden?,

Web-Frontend

)

Das obige ist der detaillierte Inhalt vonKönnen zwei HTML5-Divs in einer Zeile platziert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist die Verwendung von Import wie in es6?Nächster Artikel：Was ist die Verwendung von Import wie in es6?

In Verbindung stehende Artikel

Mehr sehen