zoukankan      html  css  js  c++  java
  • 最简单的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 {
                 100%;
                height: auto;
            }
    
            div.rxleft {
                 auto;
                float: left;
                height: auto;
                margin-bottom: 0;
                margin-top: 10px;
                padding-right: 10px;
            }
    
            hr {
                margin-top: 10px;
                margin-bottom: 0;
                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>
  • 相关阅读:
    挖矿程序linux 删除
    本地复制vue项目
    新建vue项目
    CentOS7单用户模式
    CentOS6
    CentOS6-系统管理操作
    CentOS7-系统管理操作
    VMWare克隆虚拟机
    虚拟机网络模式设置为NAT
    VI/VIM编辑器
  • 原文地址:https://www.cnblogs.com/rxbook/p/9445060.html
Copyright © 2011-2022 走看看