如果在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. 批处理--批量打开程序&批量关闭程序

    批量打开程序 start D:\work\RunSvr01\IceFire88.01.exe start D:\work\RunSvr02\IceFire88.02.exe start D:\work ...

  2. 解决Sublime Text 3中文显示乱码问题（转）

    解决Sublime Text 3中文显示乱码问题(转) 1.打开Sublime Text 3,按Ctrl+-打开控制行,复制粘贴以下python代码,然后回车运行. 2. 复制并粘贴如下代码: 2.重 ...

  3. Win8交互UX——鼠标交互

    针对触摸输入优化 Window 应用商店应用设计,并在默认情况下获得基本的鼠标支持. 设计和构建用户可以通过鼠标交互的 Windows 应用商店应用. 鼠标输入最适合那些需要精确指向和单击的用户交互. ...

  4. WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX

    具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的 ...

  5. java基础---->java注解的使用（一）

    注解是众多引入到Java SE5中的重要的语言变化之一.它为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据.今天我们就开始学习一下java中注解的知识. j ...

  6. xmlWriter

    MemoryStream msXml = new MemoryStream(); XmlTextWriter xmlWriter = new XmlTextWriter(msXml, Encoding ...

  7. ogg 12c OGG-01163

    数据同步报错: 2017-07-03 12:44:36 ERROR OGG-01163 Oracle GoldenGate Delivery for Oracle, rora_t1.prm: Bad ...

  8. CF 166E Tetrahedron

    E. Tetrahedron time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  9. Mysql On Mac OS: Remove & Install

    If you downloaded and installed from .dmg package already, and mightbe sometime it sucks because of ...

  10. AD PCB中两个不同高度器件重叠 软件报警告变绿

    这个问题遇到几次了,每次都要在网上搜索解决方法,今天记下来! 在规则里面不检查器件高度这项应该是最简单,也不影响其他规则的方法了! 具体操作: Design - rules - Component C ...