Home >Web Front-end >HTML Tutorial >How to set the width of html div
How to set the width of html div
- 青灯夜游Original
- 2021-12-13 14:55:2424474browse
html How to set the width of div: 1. Add the "width: width value;" style to the div element to set a fixed width; 2. Add the "min-width: width value;" style to the div element to set the minimum width ;3. Add the "max-width:width value;" style to the div element to set the maximum width.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
html div setting width
1. Use the width attribute
width attribute to set the element width. (Note: The width attribute does not include padding, borders and margins!)
<!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>
2. Use the min-width attribute
## The #min-width attribute sets the minimum width of an element.<!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>
3. Use the max-width attribute
max-width attribute to set the maximum width of the element.<!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>
html video tutorial"
The above is the detailed content of How to set the width of html div. For more information, please follow other related articles on the PHP Chinese website!