Div如何自适应宽度

Div如何自适应宽度？屏幕比例发生改变以后，我写的div内容就会变形
这是一开始的

img


屏幕比例发生改变以后

img

百分比 布局 宽高都用百分比

或者 div+flex布局
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html



```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>DIVCSS5小实例</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>

```

最常用的就是下面三种
1、百分比布局
2、flex布局
3、elementui中的Layout 布局https://element.eleme.cn/#/zh-CN/component/layout
早一些还有bootstrap（栅格布局）