如果在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. 【Mybatis】Mybatis基本构成

    SqlSessionFactoryBuilder(构造器):它会根据配置信息或者代码来生成SqlSessionFactory(工厂接口) SqlSessionFactory:依靠工厂来生成SqlSes ...

  2. Visual Studio for Mac离线安装教程

    Visual Studio for Mac离线安装教程 可以在线安装,也可以离线安装(本次安装博主使用离线,在线安装失败了) 据说翻个墙就可以,有条件的就翻吧 没条件的我于是选择离线安装………… 离线 ...

  3. smali-2.2.4.jar & baksmali-2.2.4.jar

    https://bitbucket.org/JesusFreke/smali/downloads/

  4. LeetCode 50 Pow(x, n) （实现幂运算）

    题目链接:https://leetcode.com/problems/powx-n/?tab=Description   Problem:实现幂运算即 pow(x,n)   设形式为pow(x,n)  ...

  5. 打开指定目录路径的CMD命令行窗口

    1.打开目录文件夹, Shift + 右键 2.会直接打开CMD所在的目录路径

  6. 关于virgo-tomcat-server-3.6.0.RELEASE配置文件修改说明

    Virgo项目Web服务器是EclipseRT项目的一部分,是一个完全模块化的Java运行时. Virgo自身就是设计为在标准OSGi框架实现(Equinox)之上的一个OSGi bundle集合. ...

  7. 【转载】纵观RTX51

    对于使用RTX51的具体好处可以在实践中去体会,就象会用了C51,就不想再用汇编了.用了RTX51,说不定就感到再也离不开它了. 1.RTX51是实时多任务操作系统RTX51是一种实时操作系统既目前在 ...

  8. python转化字符串形式的json

    在使用python对字符串形式的json进行 json.loads() 的操作时,遇到了:JSONDecodeError: Invalid \escape,提示\无法excape,可以通过以下方式将字 ...

  9. 使用find命令按条件查找多个文件并且拷贝至指定目录

    命令格式如下 find / \( -name "*.war" -o -name "*.jar" \) | xargs -i cp {} ${wardir} 当需 ...

  10. opencv学习笔记霍夫变换——直线检测

    参考大佬博文:blog.csdn.net/jia20003/article/details/7724530 lps-683.iteye.com/blog/2254368 openCV里有两个函数(比较 ...