Heim  >  Artikel  >  Web-Frontend  >  So legen Sie die Breite von HTML-Div fest

So legen Sie die Breite von HTML-Div fest

青灯夜游
青灯夜游Original
2021-12-13 14:55:2424388Durchsuche

So legen Sie die Breite von HTML div fest: 1. Fügen Sie dem div-Element den Stil „width: width value;“ hinzu. 2. Fügen Sie dem div den Stil „min-width: width value;“ hinzu 3. Fügen Sie dem div-Element den Stil „max-width: width value;“ hinzu, um die maximale Breite festzulegen.

So legen Sie die Breite von HTML-Div fest

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

html div set width

1 Verwenden Sie das width-Attribut

width-Attribut, um die Breite des Elements festzulegen. (Hinweis: Das Attribut „width“ umfasst keine Abstände, Ränder und Ränder!)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应,由视口决定</div>
		<div style="width: 200px;">设置div宽度为200px</div>
	</body>
</html>

So legen Sie die Breite von HTML-Div fest

2 Verwenden Sie das Attribut „min-width“

min-width, um die Mindestbreite des Elements festzulegen.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应,由视口决定</div>
		<div style="min-width: 200px;">设置div最小宽度为200px</div>
	</body>
</html>

So legen Sie die Breite von HTML-Div fest

3. Verwenden Sie das Attribut max-width

max-width, um die maximale Breite des Elements festzulegen.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>默认div宽度是自适应,由视口决定</div>
		<div style="max-width: 500px;">设置div最大宽度为500px</div>
	</body>
</html>

So legen Sie die Breite von HTML-Div fest

Empfohlenes Tutorial: „HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite von HTML-Div fest. 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