Make div width adaptive for teaching-HTML Tutorial-php.cn

Make div width adaptive for teaching

php中世界最好的语言

Release： 2017-11-29 11:46:18

Original

5590 people have browsed it

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>

Copy after login

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!