Heim > Web-Frontend > CSS-Tutorial > So legen Sie die Breite von div mit CSS fest

So legen Sie die Breite von div mit CSS fest

王林
Freigeben: 2023-01-06 11:13:57
Original
6899 Leute haben es durchsucht

Die Möglichkeit, die Breite eines Divs mit CSS festzulegen, besteht darin, das Breitenattribut zum Div hinzuzufügen und den Attributwert auf einen geeigneten Wert festzulegen, z. B. [width:100px;]. Wir können auch die prozentuale Breite des Div festlegen, z. B. [width:50%;].

So legen Sie die Breite von div mit CSS fest

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Tatsächlich ist es für uns sehr einfach, die Breite eines Div festzulegen, da es in CSS ein vorgefertigtes Attribut width gibt, mit dem die Breite des Elements festgelegt wird.

Attributwert:

  • auto Standardwert. Der Browser kann die tatsächliche Breite berechnen.

  • Länge Verwenden Sie px, cm und andere Einheiten, um die Breite zu definieren.

  • % Definiert die Breite als Prozentsatz basierend auf der Breite des enthaltenden Blocks (übergeordnetes Element).

  • inherit gibt an, dass der Wert des width-Attributs vom übergeordneten Element geerbt werden soll.

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
img.normal
{
	height:auto;
}
img.big
{
	height:120px;
}
p.ex
{
	height:100px;
	width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>
Nach dem Login kopieren

Verwandte Videofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite von div mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage