如果在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>

最简单的css实现页面宽度自适应的更多相关文章

  1. [转]css实现左侧宽度自适应，右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  2. CSS侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...

  3. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  4. 老生长谈：css实现右侧固定宽度，左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  5. 老生长谈，温故知新：css实现右侧固定宽度，左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  6. css实现右侧固定宽度，左侧宽度自适应

    https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...

  7. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  9. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. pycharm2016.2.3注册码到期， 激活， 破解版

    python工具下载: https://pan.baidu.com/s/1kVEDOrl#list/path=%2F 密码:ko1i 注册码有效期是一年,到期后需再次激活 分享破解版 或者重新注册码激 ...

  2. PHP的ISAPI和FastCGI比较

     1.CGI(通用网关接口/Common Gateway Interface)一般是可执行程序,例如EXE文件,和WEB服务器各自占据着不同的进程,而且一般一个CGI程序只能处理一个用户请求.这样,当 ...

  3. 页面调用Iframe中数据

    <iframe src="html的路径(至于MVC中cshtml直接路径好像是不行的,得使用action进行请求出来的路径)" id="iframechild&q ...

  4. JS函数匿名替换

    //匿名替换函数 function objFunc() { var obj = new Object(); obj.JsonData = [{ aa: "}], obj.FilterData ...

  5. Android Log缓冲区大小设置

    当手机没有连接PC时,手机log缓冲区仍然会保存指定大小的最新log,连接pc,通过adb logcat 仍然可以拿出来 如何查看log缓缓区的大小? 通过adb logcat -g 可以查看 C:\ ...

  6. cmake编译android平台的libPoco

    1.下载源代码,解压到POCO-1.7.8-ALL 2.从$ANDROID_NDK\cmake下复制android.toolchain.cmake AndroidNdkGdb.cmake Androi ...

  7. hbuilder在android手机里用chrome调试，只显示了设备名称，却没有inspect按钮

    stark 通过“菜单”->“工具”->“检查设备”打开设备检查页面,只显示了设备名称,却没有inspect按钮,要怎么办 1 赞2014-10-09 22:00 ============ ...

  8. getconf

    用途 将系统配置变量值写入标准输出. 语法 getconf [ -v specification ] [ SystemwideConfiguration | PathConfiguration Pat ...

  9. 【咸鱼教程】Wing动画编辑器创建精美(一般-_-)开场动画

    游戏中会用着一些简单的动画,公司一般使用的dragonbones制作,导出二进制格式或者MC来使用.感觉一些简单动画直接使用动画编辑器更加简便些. 引擎版本:5.0.14wing版本:4.1.0 一 ...

  10. 虚拟机VMware怎么完全卸载干净，如何彻底卸载VMware虚拟机

    亲测好使. 1.禁用VM虚拟机服务 首先,需要停止虚拟机VMware相关服务.按下快捷键WIN+R,打开windows运行对话框,输入[services.msc],点击确定.如下图. 在服务管理中,找 ...