1.正方形自适应
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#parent{width:90%;height:200px;background: black;}
#child{padding:30%;width:0;height:0;background-color: red;margin:20px auto;}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>效果图
2.两栏自适应
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
#parent{width:90%;height:200px;background: black;}
#child-one{width:100px;background: yellow;height:100%;float:left;}
#child-two-bg{padding:100px 50%;background: red;}
</style>
</head>
<body>
<div id="parent">
<div id="child-one"></div>
<div id="child-two-bg"></div>
</div>
</body>
</html>效果图
下一篇待续
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
