We all know that in CSS layout, when no style is set for the div, the div occupies an exclusive row and the default CSS style is 100% width. So this time we will teach you how to implement DIV width adaptive but the width increases from zero with the content. And the width increases? Instead of setting the width to 100% of the full screen from the beginning
Solution:
Use CSS float to make the div default 100% adaptive width to the width from Zero-based adaptive width effect.
css small case of implementing div width from scratch
1. Complete HTML+CSS code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小实例</title>
<style>
.case{ float:left}
</style>
</head>
<body>
<div>未设置float内容一</div>
<div>未设置float内容二</div>
<div class="case">加float样式的内容三</div>
<div class="case">对其加float样式的内容四</div>
</body>
</html>Key code: add floatfloating style to div , so that its width does not start at 100%, but changes with the content, just like the initial width of span, it widens as the content increases.
Summary:
Setting float on a div through CSS removes the default full-screen width style of the div, but generally you need to use such a box that adapts the content width from scratch, and you cannot use the float floating style. This can be achieved by using the span tag.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!
Related reading:
How to change the mouseover style without using CSS
Js operation Process of DOM object
Calling css file methods of different resolutions
The above is the detailed content of Make div width adaptive for teaching. For more information, please follow other related articles on the PHP Chinese website!
Session failure solution
How to set ppt widescreen
Can Douyin sparks be lit again if they have been off for more than three days?
Why does vue.js report an error?
What to do if your IP address is attacked
The difference between WeChat service account and official account
msdn official website entrance
The difference between fprintf and printf
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
