Make div width adaptive for teaching

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

 
 
 
 
 
 

 
 
未设置float内容一
 
未设置float内容二
 
加float样式的内容三
 
对其加float样式的内容四
 
 

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!