1. 如果在PC访问，就会显示在一行，如果在手机访问，就会显示为三行。（视手机屏幕的分辨率定）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=1,user-scalable=no">
  6.     <title>最简单的css实现页面宽度自适应</title>
  7.     <style>
  8.         div.rxs {
  9.             width: %;
  10.             height: auto;
  11.         }
  12.  
  13.         div.rxleft {
  14.             width: auto;
  15.             float: left;
  16.             height: auto;
  17.             margin-bottom: ;
  18.             margin-top: 10px;
  19.             padding-right: 10px;
  20.         }
  21.  
  22.         hr {
  23.             margin-top: 10px;
  24.             margin-bottom: ;
  25.             border-top: 1px solid #CCC;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div class="rxs">
  32.     <div class="rxleft">
  33.         第一段内容，可以是任何html标签
  34.     </div>
  35.     <div class="rxleft">
  36.         第二段内容，可以是任何html标签
  37.     </div>
  38.     <div class="rxleft">
  39.         第三段内容，可以是任何html标签
  40.     </div>
  41.     <div style="clear:both"></div>
  42. </div>
  43.  
  44. <hr>
  45.  
  46. </body>
  47. </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. 多了解一下Chrome开发者控制台

    多了解一下Chrome开发者控制台 2017年10月14日 • Tools, Web前端 • 1.0k views • 暂无评论 作为一名前端开发者,Chrome内置的控制台是必须了解的,它拥有非常丰 ...

  2. PV&UV&IP之间的区别和联系

    PV PV是网站分析的一个术语,用于衡量网站用户访问的网页的数量.对于广告投入商来说,PV值可以预期它可以带来多少收入广告,一般来说,OV与来访者的数量成正比,但是PV并不直接决定页面的真实来访者数量 ...

  3. 分页SQL代码

    city_id ORDER BY city_id )

  4. 编译内核时出现__bad_udelay错误

    今天编译内核时候遇到了__bad_udelay错误,然后编不过去了,仔细一看发现是udelay函数的参数太大,内核不允许延时这么多.于是换成了mdelay函数,以毫秒为单位延时,问题解决.

  5. if中的-n -z linux_Shell

    ==========1 混淆的-n  -z================= -n 表示这个变量或者字符串是否不为空.-z 表示这个变量或者字符串为空 上面这两句话中最重要的点是不通的 -n 关注的是 ...

  6. Telnet是什么意思又是什么协议 Telnet有什么作用及功能

    Telnet是teletype network的缩写,专业的说,Telnet是Internet上远程登录的一种程序:它可以让您的电脑通过网络登录到网络另一端的电脑上,甚至还可以存取那台电脑上的文件. ...

  7. Scala日期处理

    计算时间间隔  val d = new java.text.SimpleDateFormat("yyyyMMdd HH:mm:ss").format(new java.util.D ...

  8. Hive FUNCTIONS函数

    hive> SHOW FUNCTIONS; ! != % & * + - / < <= <=> <> = == > >= ^ abs ac ...

  9. 7.18python进程池

    主要方法  常用的就是   from multiprocessing import Pool map() 同步 apply() 同步 apply_async()  异步  手动 close()  jo ...

  10. C++和Java中枚举enum的用法

    在C++和java中都有枚举enum这个关键字,但是它们之间又不太一样.对于C++来说,枚举是一系列命名了的整型常量,而且从枚举值转化为对应的整型值是在内部进行的.而对于Java来说,枚举更像一个类的 ...