最简单的css实现页面宽度自适应

如果在PC访问,就会显示在一行,如果在手机访问,就会显示为三行。(视手机屏幕的分辨率定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>最简单的css实现页面宽度自适应</title>
<style>
div.rxs {
width: %;
height: auto;
} div.rxleft {
width: auto;
float: left;
height: auto;
margin-bottom: ;
margin-top: 10px;
padding-right: 10px;
} hr {
margin-top: 10px;
margin-bottom: ;
border-top: 1px solid #CCC;
}
</style>
</head>
<body> <div class="rxs">
<div class="rxleft">
第一段内容,可以是任何html标签
</div>
<div class="rxleft">
第二段内容,可以是任何html标签
</div>
<div class="rxleft">
第三段内容,可以是任何html标签
</div>
<div style="clear:both"></div>
</div> <hr> </body>
</html>
上一篇:Java 为程序创建日志系统


下一篇:windows10系统安装Oralce11g时遇到INS-13001环境不满足最低要求